CODEWITHSUNDEEP
jqueryjquery-validate
Abishek
Abishek

Reputation: 11691

Alternate Element to show jQuery Validation errors

How can one show all the validation errors in a separate element (ex: div) instead of using the labels attached to each of the elements?

Currently I have the following code that is binding all the errors to another div element below the form.

$('#myForm').validate({
        rules:{
            txtName:{
                required:true,
                minlength:5,
                maxlength:100
            },
            selGroups:{
                required:true
            },
            txtDate:{
                required:true
            }
        },
        submitHandler:function () {
            return false;
        },
        messages:{
            txtHolidayName:"Please enter the Name (5 - 100 chars)",
            selGroups:"Please select the Group",
            txtHolidayDate:"Please select the date"
        },
        errorPlacement:function (error, element) {
            error.appendTo($('#errorContainer'));
        },
        invalidHandler:function (form, validator) {
            var errors = validator.numberOfInvalids();
            if (errors)
                $('#errorContainer').fadeIn();
        }
    });

I have partially achieved this, but having trouble hiding the div element which contains all the errors after the success of all validations. Could someone help me fix this issue?

Upvotes: 1

Views: 582

Answers (1)

politus
politus

Reputation: 6086

use the errorLabelContainer setting, which works nicely with the wrapper setting also

$("form").validate({
errorLabelContainer: "#messageBox",
wrapper: "li",
});

make sure you have the corresponding html

<ul id="messageBox"></ul>
<form>
 <input name="fname" id="fname" class="required">
 <input type="submit" />
</form>

Upvotes: 2

Related Questions