I'm using jQuery Validator and I'd like to be able to disable the default focus behavior.
I am including the field names as values directly in the input fields themselves (like what you see in the "search" input at the top right side of Stack Overflow). The problem here, is that when I submit the form and a field is flagged as invalid, it automatically focuses on the field, which removes the field value.
This could be confusing for a user, as they no long know the purpose of that specific field. Is there any way to disable this behavior?
I've included my code below, in case that helps:
$(document).ready(function(){
jQuery.validator.messages.required = "";
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value !== param;
}, "");
$("#quoteForm").validate({
rules: {
firstName: {
required: true,
notEqual: "First name"
},
email: {
required: function(element) {return $("#emailAdd").val() == '';},
notEqual: "Email",
email: false
},
phone: {
required: function(element) {return $("#phoneNum").val() == '';},
notEqual: "Phone",
phoneUS: false
}
}
});
});
I found the answer to this and just wanted to share it here:
I simply needed to use focusInvalid: false
.
Use Jeremy's answer like this:
$("#contactForm form").validate({
focusInvalid: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
message: "required"
},
messages: {
name: 'Fill in name',
email: 'Fill in email',
message: 'Fill in message'
},
submitHandler: function(form) {
return SubmitContactForm();
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With