Search code examples
jqueryjquery-validateunobtrusive-validation

jquery-validation-unobtrusive: Display Different Error Messages in Summary and Label

I want to show different Error messages for the same control in Error Summary and label after the checkbox.

If the checkbox is not ticked,

In Summary, I want to display "You must tick the Copyright Confirmation checkbox to continue."

In adjacent Checkbox label, I want to display "must check to continue"

js:

$.validator.addMethod("chkCopyright", function (value, element) {
        return $('#chkCopyright').is(':checked');
    }, "You must tick the Copyright Confirmation checkbox to continue.");

html code:

<label class="checkbox-inline">
     <input type="checkbox" name="chkCopyright" data-rule-chkCopyright="true" value="1" data-msg-chkCopyright="must check to continue"> I confirm that there are no copyright restrictions on this repro request. <span class="text-danger field-validation-valid" data-valmsg-for="chkCopyright" data-valmsg-replace="true"> </span>
</label>

But when the validation fails, the message in data-msg is overtaking and it's showing on the Error Summary.

How can I show different error messages in both places? enter image description here

Solution

  • How can I show different error messages in both places?

    This plugin provides no procedure or method to have two completely different error messages both representing the same rule for the same field. Period.

    Possible workaround?...

    You might be able to leverage the showErrors function to construct a custom list of messages up top, however, this may get very tedious and sticky.

    You could use the errorMap and/or errorList objects to help construct a new list of errors for each field and rule. And if you use this.defaultShowErrors() inside of this function, you will reactivate the default messages that normally appear next to every form input. These defaults would use the messages as you've previously defined them within your rules.