Using jquery validator. validation is not performed when using tab to navigate the form.

Here's the fiddle

$(function () {
         var validator = $("#myForm").validate({ 
             onfocusout: function(element) {
                   this.element(element);
                },
             rules: { 
                 fname: "required", 
                 check: "required",
                 color: "required"
                }, 
             messages: { 
                 fname: "Enter your firstname", 
                 check: "you know you do",
                 color: "pick one!",
             }, 
         }); 
     });

I tried to perform a on blur on the checkbox. However, the event is trigger on form load. Here's the improved fiddle

$('#check').on('blur', function() {
            $("#myForm").validate().element( this );
        }).blur();

Using jquery validator. validation is not performed when using tab to navigate the form.

Here's the fiddle

$(function () {
         var validator = $("#myForm").validate({ 
             onfocusout: function(element) {
                   this.element(element);
                },
             rules: { 
                 fname: "required", 
                 check: "required",
                 color: "required"
                }, 
             messages: { 
                 fname: "Enter your firstname", 
                 check: "you know you do",
                 color: "pick one!",
             }, 
         }); 
     });

I tried to perform a on blur on the checkbox. However, the event is trigger on form load. Here's the improved fiddle

$('#check').on('blur', function() {
            $("#myForm").validate().element( this );
        }).blur();

• javascript
• jquery
• jquery-validate
• validation

Share Improve this question Follow edited Jun 1, 2013 at 16:38 user1549804 asked May 29, 2013 at 9:23 user1549804user1549804 13111 silver badge1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The solution/work around the onfocusout issue is to use the on blur for both checkbox and radio.

$(function () {
    var validator = $("#myForm").validate({ 
        onfocusout: function(element) {
            this.element(element);
    },
    rules: { 
        fname: "required", 
        check: "required",
        radio: "required",
        color: "required"
    }, 
    messages: { 
        fname: "Enter your firstname", 
        check: "check your checkbox",
        radio: "check your radio",
        color: "pick one!",
    }, 
    }); 

    $('#check').on('blur', function() {
        $("#myForm").validate().element( this );
    });
    $('#radio').on('blur', function() {
        $("#myForm").validate().element( this );
    });
});

Take note that you do not call the blur function like this:

$('#check').on('blur', function() {
    $("#myForm").validate().element( this );
}).blur();

the initial blur function will cause the validation to be trigger on load

Here's the working fiddle

onfocusout does not show error message, otherwise the best way to validate elements on blur is;

onfocusout: function(element) { 
    if( $(element).attr('name') ) { 
            this.element(element);  
    }
}

Check the onfocusout option.

"Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid."

Validate