JQuery validate custom error message is not showing up

Question

Following is the form validation javascript in my application:

$('#EmploymentHistoryForm').validate({
ignore: ':hidden, [readonly=readonly]',
rules: {
    'MemberJob.Phone': {
        PhoneFieldValidation: true
    }
},
messages: {
    'MemberJob.Phone': {
        PhoneFieldValidation: $.viewUrl.url.invaliedPhoneMessage
    }
},
showErrors: function (errorMap, errorList) {
    ShowErrors(errorMap, errorList, this.validElements());
},
submitHandler: function (form, event) {
    event.preventDefault();
    return false;
}
});

Here, $.viewUrl.url.invaliedPhoneMessage is set at the cshtml page (in ASP.NET MVC), and while debugging the javascript I can see proper value in that variable when $('...').validate function gets hit.

I have registered a new validator "PhoneFieldValidation" in JQuery validators collection:

$.validator.addMethod("PhoneFieldValidation", ValidatePhoneAndAltPhone);

Following is the rendered HTML for the input control for which I have added this validation rule:

<input class="PhoneFieldValidation" id="MemberJob_Phone" name="MemberJob.Phone" type="text" required="required" aria-required="true">

I can see the validation getting fired correctly. That means, "ValidatePhoneAndAltPhone" method is getting called, and returning a boolean result based on the input.

However, the error message is not getting displayed properly. It displays "Warning: No message defined for MemberJob.Phone" instead of "Invalid Phone Number".

While debugging through customMessage function of jquery.validate.js, I could see "this.settings.messages" collection is not having the message for "MemberJob.Phone" field, and that looks to be the root cause of this issue.

Any idea of how to resolve this issue?

I know we can add "data-msg-[rulename]" attribute in the HTML tag which will fix the issue. But I am sure the current approach I am following is also correct. Seems I am missing something.

Any help on this will be much appreciated.

Thanks

You never mention where $.viewUrl.url.invaliedPhoneMessage comes from. — Sparky
– Sparky, Commented Aug 30, 2017 at 15:38

Sparky · Accepted Answer · 2017-09-09 15:14:33Z

3

You never mentioned where $.viewUrl.url.invaliedPhoneMessage comes from.

If there is already a message defined in your custom PhoneFieldValidation method, then you would not define a message within the messages object.

~~Otherwise, you cannot use a JavaScript variable within the messages object without a function.~~

The whole problem is being caused by the Unobtrusive plugin which is automatically constructing the .validate() method call. You cannot call .validate() more than once on the same form; and all subsequent calls are ignored. Instead, you can simply define the custom message for PhoneFieldValidation within its .addMethod() method.

$.validator.addMethod("PhoneFieldValidation", function(value, element) {
    // your custom method function here;
}, "This is your custom validation error message");

edited Sep 9, 2017 at 15:14

answered Aug 30, 2017 at 15:52

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Nirman Over a year ago

I have updated question to mention the source of $.viewUrl.url.invaliedPhoneMessage. However, as I can see expected value in that variable while debugging, it doesn't seem to be an issue there.

Nirman Over a year ago

As of now, I have found one solution, and that is to pass the message in $.validator.addMethod() function, and it works. But I am still clueless of why the message specified in the "messages" segment doesn't work.

Sparky Over a year ago

@Nirman, it does not matter how the page is constructed or what's on the server; JavaScript only cares about the final rendered code as seen within the browser source. Inspect the DOM and look at what is inside the messages object.

Sparky Over a year ago

@Nirman, you also never mentioned ASP until now. Are you using the Unobtrusive Validation plugin? If so, then you cannot construct .validate() yourself... it will NOT override the instance of .validate() constructed by the Unobtrusive plugin.

Nirman Over a year ago

Oh sorry.. actually, I thought it doesn't have anything to do with ASP.NET MVC so I didn't mention in the question. But yes, I added a tag for ASP.NET MVC, but a moderator deleted it! You mean to say, that $('#EmployementHistoryForm').validate(..) cannot work if we have unobtrusive validation plugin? I have jquery.unobtrusive-ajax plugin loaded in this page. Does it causing the issue?

|

Collectives™ on Stack Overflow

JQuery validate custom error message is not showing up

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related