Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable automatic input focus with jQuery validator

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
            }
        }
    });
});
like image 754
Jeremy Avatar asked Jan 21 '12 19:01

Jeremy


2 Answers

I found the answer to this and just wanted to share it here:

I simply needed to use focusInvalid: false.

like image 56
Jeremy Avatar answered Oct 23 '22 15:10

Jeremy


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();
            }
        });
like image 9
Rick Avatar answered Oct 23 '22 13:10

Rick