jQuery validation regex: multiple rule checks, same field

Question

I have a jQuery validation regex that checks if phrase(s) are included:

$.validator.addMethod("regex", function(value, element, regexp) {
    return this.optional(element) || regexp.test(value);
}, "You must include the required keyword phrase(s).");

If I have multiple phrases to check, i'm adding them with:

$("#text").rules("add", { regex: /phrase one/i });
$("#text").rules("add", { regex: /another phrase/i });
$("#text").rules("add", { regex: /test phrase/i });

The problem i'm having is that it only checks for the last phrase rule, meaning if "test phrase" is included, but the others aren't, it will accept it. I need it to check to make sure all phrases are included.

I would also like the error message to be able to include the phase that's missing, example, if "another phrase" is missing, the error will be:

You must include the required phrase: another phrase

Thx

David Tang · Accepted Answer · 2010-12-09 02:35:26Z

1

You should make a method specific to the requirement, rather than going for the generic regex:

var vInstance = $("form").validator(/* options */);

$.validator.addMethod("multiPhrases", function (value, element, phrases) {
   var missingPhrase, errObject = {};

   // Check for all the phrases
   for (var i = 0; i < phrases.length; i++) {
      if (value.toLowerCase().indexOf(phrases[i].toLowerCase()) < 0) {
         // Phrase not found
         missingPhrase = phrases[i];
         break;
      }
   }

   // Show the error yourself
   if (missingPhrase) {
      errObject[$(element).attr("name")] =
         "You must include the required phrase: " +
         missingPhrase;
      vInstance.showErrors(errObject);
   }

   // Tell the plugin if there was an error
   return (missingPhrase == false);
});

This requires your input to have a name attribute, and you need to save a reference to the validator object (vInstance) when it's created. It's the best hack I can think of after looking at jQuery validator's API. IMO, a decent validation plugin should let you return a custom error message from the custom function...

Use it like so:

$("#text").rules("add", {multiPhrases: [
   "phrase one",
   "another phrase",
   "test phrase"
]});

answered Dec 9, 2010 at 2:35

David Tang

93.8k32 gold badges169 silver badges149 bronze badges

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

8 Comments

Ricky Over a year ago

I guess i'll give this a try since there are no better answers. Thanks

Ricky Over a year ago

I'm getting the error: "Warning: No message defined for article_text". Any ideas?

David Tang Over a year ago

Sounds like the plugin wants you to put a specific error message in for the method. I could be wrong, but it looks like the plugin isn't flexible enough to allow dynamic error messages. What you can try is to add a message after the function in addMethod like you did for the regex (that'll get rid of the warning message), but my guess is that it'll override the one I tried to put in.

Ricky Over a year ago

I found stackoverflow.com/questions/976384/… Maybe the showErrors() option will work?

David Tang Over a year ago

That forum post just confirms my suspicions, although I did just think of a hack you can try... wrap the vInstance.showErrors line in a setTimeout for 100 milliseconds or so. Not elegant, but might work. I've been thinking about polishing up and releasing a validation framework I wrote a while back because sadly this one and jQuery Tool's one both aren't nearly flexible enough...

|

Community · Accepted Answer · 2017-05-23 12:29:12Z

I used Box9 answer, and fixed the problem him and Ricky were having about the message being overwritten with "Warning: No message defined for..." So the complete and working solution would be this:

Quoting Box9:

You should make a method specific to the requirement, rather than going for the generic regex:

$("form").validator(/* options */);

$.validator.addMethod("multiPhrases", function (value, element, phrases) {
  var missingPhrase, errObject = {};

  // Check for all the phrases
  for (var i = 0; i < phrases.length; i++) {
    if (value.toLowerCase().indexOf(phrases[i].toLowerCase()) < 0) {
       // Phrase not found
       missingPhrase = phrases[i];
       break;
    }
  }

  // Set the message as default for this validation
  if (missingPhrase) {
    errObject["multiPhrases"] =
        "You must include the required phrase: " + missingPhrase;
     jQuery.extend(jQuery.validator.messages, errObject);
  }

  // Tell the plugin if there was an error
  return (missingPhrase == false);
});

Instead of showing the error yourself, as Box9 initially proposed with showErrors(), you must set it as the default message for this validation, because jQuery.validation plugin will look for the default anyway, and overwrite any previous error shown for this element.

Quoting Box9 again:

This requires your input to have a name attribute.

Use it like so:

$("#text").rules("add", {multiPhrases: [
   "phrase one",
   "another phrase",
   "test phrase"
]});

Thank you Box9 and Ricky for initially posting this, as it helped me find the solution.

Collectives™ on Stack Overflow

jQuery validation regex: multiple rule checks, same field

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related