CODEWITHSUNDEEP
jqueryjquery-mobilejquery-validate
Ken Vernaillen
Ken Vernaillen

Reputation: 859

Jquery validation - errorPlacement only works first time

This is my code

http://jqueryvalidation.org/documentation/

var validator = $("#loginForm").validate({
    errorPlacement: function (error, element) {
        error.html("");
        var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
        img.attr('src', "../images/inputerror.png");
        img.appendTo(error);
        error.insertAfter(element);
    }
});

This sets an image instead of the 'This field is required'.

It all works fine.. but only the first time. When I validate it again, it shows 'this field is required again'.

first time

enter image description here

second time

enter image description here

Upvotes: 1

Views: 2353

Answers (3)

Maksym Kreshchyshyn
Maksym Kreshchyshyn

Reputation: 354

Why don't just do it with showError function instead of errorReplacement?

Take a look at this example:

var validator = $("#loginForm").validate({
    errorClass: "error", 
    errorElement: 'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div.control-group").addClass(errorClass);
    },
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass);
    }, 
    showErrors: function(map, list) {
        this.defaultShowErrors();           // calls the default function
                                            // after which we can add our changes
        $('span.error').each(function(index) {
            $(this).html('');
            var img = $('<img id="dynamic">');
            img.attr('src', "../images/inputerror.png");
            $(this).append(img);            
        });
    }
});

Upvotes: 1

Sparky
Sparky

Reputation: 98758

You have to use the proper callback functions to get the expected behavior. Typically, errorPlacement is only used for custom layout... like if you want all messages underneath the input or inside of a tooltip.

For toggling classes on error, or toggling an image in this case, you would use the highlight and unhighlight callback functions. See: http://jqueryvalidation.org/validate/

However, your usage of HTML in place of the message is an acceptable workaround. Just keep the DOM structure in mind... by default, your custom HTML will be wrapped inside of a <label> element unless you specify a different kind of element using the errorElement option.

DOM structure with default options:

<label class="error"><img src="inputerror.png" /></label>

Using the errorElement: 'span' option...

var validator = $("#loginForm").validate({
    // your options and rules,
    errorElement: 'span'
});

Resulting DOM structure:

<span class="error"><img src="inputerror.png" /></span>

Upvotes: 3

Ken Vernaillen
Ken Vernaillen

Reputation: 859

   jQuery.extend(jQuery.validator.messages, {
            required: "<img src='../images/inputerror.png'/>"
    });

This did it. Thanks to @Omar!

Upvotes: 2

Related Questions