CODEWITHSUNDEEP
jqueryjquery-validatetwitter-bootstrap
SWL
SWL

Reputation: 3864

jQuery.validate error message not formatting in Twitter Bootstrap

I have a registration form that is validated via jQuery Validate and while the form catches errors properly and displays the validation error message, it doesn't use my "label label-important" class until I force the validation/click the submit button a SECOND time.

Take a look here: http://jsbin.com/uguwem/12/

Here's my js code:

$('#registrationform').validate({ 
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='control-group']").addClass("error");
        $(element.form).find("span[for=" + element.id + "]").addClass("label label-important");
        }, 
        unhighlight: function (element, errorClass, validClass) { 
                $(element).parents(".error").removeClass("error"); 
        }, 
        errorElement: 'span' 
 });

Upvotes: 1

Views: 1447

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

It looks like highlight is called before the error element (a span in your case) is generated.

This means that when you try to find the span for the first time in highlight, it doesn't exist. validate doesn't remove error elements, it just shows and hides them, which is why it is found the second time the form is validated.

I would get around this by using the errorPlacement option instead and manually adding the class:

$(document).ready(function() {
    $('#registrationform').validate({
        //errorClass: "label-important",
        highlight: function(element, errorClass, validClass) {
            $(element).parents("div[class='control-group']").addClass("error");

        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents(".error").removeClass("error");
        },
        errorElement: 'span',
        errorPlacement: function($error, $element) {
            $error.addClass("label label-important").insertAfter($element);
        }
    });
});​

Updated example: http://jsbin.com/opoqan/

Upvotes: 1

Related Questions