asked on 6/30/2015

jQuery Validator Custom Rules with passed-in messages

I'm trying to make my life easier using HTML5 tags to setup validation. I created a jQuery custom validation rule as follows:

jQuery.validator.addMethod("data-rule-usphone", function (value, element)
{
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
}, "Please enter a valid phone number");

Open in new window

My HTML markup looks like this:

<input id="inputBusinessPhone" runat="server" placeholder="Business Phone" name="BusinessPhone" data-mask="(999) 999-9999" required data-rule-usphone="true" data-msg-usphone="Please enter the business telephone number" />

Open in new window

My question is how do I modify the jQuery validator custom function to use the value found in data-msg-usphone in the HTML markup? I'm not finding info online to do this.

jQuery JavaScript HTML

Last Comment

Julian Hansen

7/2/2015

Julian Hansen

7/1/2015

Your problem is that you are using hyphenated identifiers for your validator - this means that when you want to access the message for that validator you can't because hyphens are not valid in JavaScript property names.
This code should do what you require

<script type="text/javascript">
$(function() {
  $('form').validate({
    rules : {
      "BusinessPhone" : {
        required: true,
        BusinessPhone: true
      }
    }
  });
  
  jQuery.validator.addMethod("BusinessPhone", function (value, element)
  {
    jQuery.validator.messages.BusinessPhone = $(element).data('msg-usphone');
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
  }, "Please enter a valid phone number");
});

Open in new window

Russ Suter

7/1/2015

ASKER

Hmmm... I'm using HTML5 markup. There must be a way for Javascript to recognize HTML5 markup which DOES use hyphens.

Julian Hansen

7/2/2015

Hyphens in property names is a JavaScript limitation - the hyphen is a minus sign and using it in a property name creates an unresolvable ambiguity

You can still access a property that internally is represented with hyphens using the quoted index - in your case this would be something like this

  jQuery.validator.addMethod("data-rule-usphone", function (value, element)
  {
   // Note the reference using a quoted array index.
    jQuery.validator.messages["data-rule-usphone"] = $(element).data('msg-usphone');
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
  }, "Please enter a valid phone number");

Open in new window

Russ Suter

7/2/2015

ASKER

OK. I tried your code suggestion but I still get the message "Please enter a valid phone number" rather than the custom message indicated by the data element "msg-usphone" so this doesn't work.

ASKER CERTIFIED SOLUTION

Julian Hansen

7/2/2015

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Russ Suter

7/2/2015

ASKER

Had to make a minor change as follows:

jQuery.validator.addMethod("data-rule-usphone", function (value, element)
{
    if ($(element).data("msg-usphone") !== undefined)
    {
        jQuery.validator.messages["data-rule-usphone"] = $(element).data('msg-usphone');
    }
    else
    {
        jQuery.validator.messages["data-rule-usphone"] = "Please enter a valid phone number";
    }
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
});

Open in new window

Otherwise if you don't specify the data-msg-usphone attribute you get a nasty error. The validator doesn't get to the string at the end.

But... with this change it is now working. Thanks!

Julian Hansen

7/2/2015

You are welcome.