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'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
            }
        }
    });
});

• javascript
• jquery
• validation

• You should write your solution as an answer and accept it as the correct answer. – PetersenDidIt Commented Jan 22, 2012 at 5:19

2 Answers 2

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();
            }
        });