jQuery validate plugin - showErrors option - errorContainer not un-hiding / showing

问题

I've been trying to get a nice validation solution to work for my site, but I'm having trouble with the different options. I have read the docs thoroughly and looked at examples, but I'm still having issues.

My form is in a table. I want each row to have it's own error row beneath it, which would ordinarily be hidden, but which would show for each row as appropriate.

The following options hid and showed the error rows fine, but the error message shown in each error row was the whole concatenation of every error message:

$('#myform').validate({
    rules: {
        firstName: "required",
        lastName: "required"
    },
    messages: {
        firstName: "Enter your first name.",
        lastName: "Enter your last name."
    },
    errorContainer: '.errorRow',
    errorLabelContainer: '.errorRow.appValueColumn',
    errorPlacement: function(error, element) {
        error.appendTo( element.parent().next() );
    }
});

so I tried to use the showErrors option as follows:

  $('#myform').validate({
        rules: {
            firstName: "required",
            lastName: "required"
        },
        messages: {
            firstName: "Enter your first name.",
            lastName: "Enter your last name."
        },
        errorContainer: '.errorRow',
        errorContainer: '.errorRow.appValueColumn',
        showErrors: function(errorMap, errorList) {
        $.each(errorMap, function(key, value) {
       $('#'+key).parent().next().children('.appValueColumn').html(errorMap[key]);
});

Well, now the errors are all separated and shown in the correct place, but I can't get the .errorRows to show. What am I doing wrong here?

Many thanks

回答1:

If you look at the source of the validation plugin for the showErrors method, you have:

this.settings.showErrors
            ? this.settings.showErrors.call( this, this.errorMap, this.errorList )
            : this.defaultShowErrors();

This means that if you provide a custom handler for this method, the default behavior is not executed.

You could either call this.defaultShowErrors() at the end of your own showErrors handler, which will become:

showErrors: function(errorMap, errorList) {
    $.each(errorMap, function(key, value) {
        $('#'+key).parent().next().children('.appValueColumn')
                  .html(errorMap[key]);
    });
    this.defaultShowErrors();
});

Hope this helps !

回答2:

Make sure you use the classname without the leading dot on these lines:

errorContainer: 'errorRow',
errorLabelContainer: 'errorRow appValueColumn',

来源：https://stackoverflow.com/questions/6563305/jquery-validate-plugin-showerrors-option-errorcontainer-not-un-hiding-show

标签

jquery

jquery-validate