jQuery validate How to add a rule for regular expression validation

Question

I am using the jQuery validation plugin  Great stuff  I want to migrate my existing ASP NET solution to use jQuery instead of the ASP NET validators  I am missing a replacement for the regular expression validator  I want to be able to do something like this      Textbox   rules  add     regularExpression     a-zA-Z   s  1 40         How do I add a custom rule to achieve this

User · Answer

You may use pattern defined in the additional-methods js file  Note that this additional-methods js file must be included after jQuery Validate dependency  then you can just use   x000D   x000D      frm   validate   x000D      rules    x000D          Textbox    x000D              pattern     a-zA-Z   s  1 40    x000D             x000D         x000D      messages    x000D          Textbox    x000D              pattern   The Textbox string format is invalid  x000D            x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 17 0 jquery validate js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 17 0 additional-methods min js  gt  lt  script gt  x000D   lt form id  frm  method  get  action    gt  x000D       lt fieldset gt  x000D           lt p gt  x000D               lt label for  fullname  gt Textbox lt  label gt  x000D               lt input id  Textbox  name  Textbox  type  text  gt  x000D           lt  p gt  x000D       lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

This worked for me  being one of the validation rules       Zip                    required  true                  regex     d 5     - s  d 4                      Hope it helps

User · Answer

Have you tried this      quot Textbox quot   rules  quot add quot     regex   quot   a-zA-Z    s  1 40   quot   messages    regex   quot The text is invalid    quot        Note  make sure to escape all the  quot   quot  of ur regex by adding another  quot   quot  in front of them else the regex wont work as expected

User · Answer

You can use the addMethod    e g     validator addMethod  postalCode   function  value         return      d 5 - d 4     d 5     A-Z  d A-Z  s d A-Z  d     test value        Please enter a valid US or Canadian postal code       good article here https   web archive org web 20130609222116 http   www randallmorey com blog 2008 mar 16 extending-jquery-form-validation-plugin

User · Answer

I had some trouble putting together all the pieces for doing a jQuery regular expression validator  but I got it to work    Here is a complete working example  It uses the  Validation  plugin which can be found in jQuery Validation Plugin   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt       lt script src  http   YOURJQUERYPATH js jquery js  type  text javascript  gt  lt  script gt       lt script src  http   YOURJQUERYPATH js jquery validate js  type  text javascript  gt  lt  script gt       lt script type  text javascript  gt               ready function                   validator addMethod  EMAIL   function value  element                    return this optional element        a-zA-Z0-9  -    a-zA-Z0-9-     a-zA-Z   2 5   i test value                   Email Address is invalid  Please enter a valid email address                    validator addMethod  PASSWORD  function value element                   return this optional element             d       a-z        A-Z    8 16   i test value                  Passwords are 8-16 characters with uppercase letters  lowercase letters and at least one number                    validator addMethod  SUBMIT  function value element                   return this optional element           i test value                  You did not click the submit button                     Validate signup form on keyup and submit                 LOGIN   validate                   rules                        EMAIL   required EMAIL                       PASSWORD   required PASSWORD                       SUBMIT   required SUBMIT                                                       lt  script gt   lt  head gt   lt body gt       lt div id  LOGIN FORM  class  form  gt           lt form id  LOGIN  name  LOGIN  method  post  action   index secure authentication action login  gt               lt h1 gt Log In lt  h1 gt               lt div id  LOGIN EMAIL  gt                   lt label for  EMAIL  gt Email Address lt  label gt                   lt input id  EMAIL  name  EMAIL  type  text  value    tabindex  1    gt               lt  div gt               lt div id  LOGIN PASSWORD  gt                   lt label for  PASSWORD  gt Password lt  label gt                   lt input id  PASSWORD  name  PASSWORD  type  password  value    tabindex  2    gt               lt  div gt               lt div id  LOGIN SUBMIT  gt                   lt input id  SUBMIT  name  SUBMIT  type  submit  value  Submit  tabindex  3    gt               lt  div gt           lt  form gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

You can use the addMethod    e g     validator addMethod  postalCode   function  value         return      d 5 - d 4     d 5     A-Z  d A-Z  s d A-Z  d     test value        Please enter a valid US or Canadian postal code       good article here https   web archive org web 20130609222116 http   www randallmorey com blog 2008 mar 16 extending-jquery-form-validation-plugin

User · Answer

validator methods checkEmail   function  value  element             return this optional  element        a-z    a-z     a-z    test  value                  quot  myForm quot   validate           rules                email                    required  true                  checkEmail  true                                  messages                email   quot incorrect email quot

User · Answer

Have you tried this      quot Textbox quot   rules  quot add quot     regex   quot   a-zA-Z    s  1 40   quot   messages    regex   quot The text is invalid    quot        Note  make sure to escape all the  quot   quot  of ur regex by adding another  quot   quot  in front of them else the regex wont work as expected

User · Answer

This is working code   function validateSignup              validator addMethod               regex               function value  element  regexp                                 if  regexp constructor    RegExp                      regexp   new RegExp regexp                   else if  regexp global                      regexp lastIndex   0                  return this optional element     regexp test value                               Please check your input                   signupForm   validate                 onkeyup   false          errorClass   req mess           ignore    hidden           validClass   signup valid class           errorClass   signup error class            rules                         email                                required  true                  email  true                  regex     A-Za-z0-9      A-Za-z0-9      A-Za-z0-9                                  userId                                required  true                  minlength  6                  maxlength  15                  regex     A-Za-z0-9   6 15                                 phoneNum                                required  true                  regex      -  1  0-9  1 3  - 0-9  10                                        messages                         email                                 required   You must enter a email                   regex   Please enter a valid email without spacial chars  ie  Example gmail com                              userId                                required   Alphanumeric     min 6  max 15                   regex   Please enter any alphaNumeric char of length between 6-15  ie  sbp arun 2016                              phoneNum                                 required   Please enter your phone number                   regex   e g   91-1234567890                                          submitHandler  function  form                        return true

User · Answer

Thanks to the answer of redsquare I added a method like this    validator addMethod     quot regex quot     function value  element  regexp        var re   new RegExp regexp       return this optional element     re test value           quot Please check your input  quot      Now all you need to do to validate against any regex is this     quot  Textbox quot   rules  quot add quot     regex   quot   a-zA-Z    s  1 40   quot      Additionally  it looks like there is a file called additional-methods js that contains the method  quot pattern quot   which can be a RegExp when created using the method without quotes   Edit The pattern function is now the preferred way to do this  making the example     quot  Textbox quot   rules  quot add quot     pattern   quot   a-zA-Z    s  1 40   quot       https   cdnjs com libraries jquery-validate  https   cdnjs cloudflare com ajax libs jquery-validate 1 19 2 jquery validate min js https   cdnjs cloudflare com ajax libs jquery-validate 1 19 2 additional-methods min js

User · Answer

This worked for me  being one of the validation rules       Zip                    required  true                  regex     d 5     - s  d 4                      Hope it helps

User · Answer

You can use the addMethod    e g     validator addMethod  postalCode   function  value         return      d 5 - d 4     d 5     A-Z  d A-Z  s d A-Z  d     test value        Please enter a valid US or Canadian postal code       good article here https   web archive org web 20130609222116 http   www randallmorey com blog 2008 mar 16 extending-jquery-form-validation-plugin

User · Answer

No reason to define the regex as a string     validator addMethod       regex       function value  element  regexp            var check   false          return this optional element     regexp test value               Please check your input        and  telephone    required  true  regex       d s      minlength  5      tis better this way  no

User · Answer

Extending PeterTheNiceGuy s answer a bit     validator addMethod           regex           function value  element  regexp                if  regexp constructor    RegExp                  regexp   new RegExp regexp               else if  regexp global                  regexp lastIndex   0              return this optional element     regexp test value                       Please check your input        This would allow you to pass a regex object to the rule      Textbox   rules  add     regex     a-zA-Z   s  1 40          Resetting the lastIndex property is necessary when the g-flag is set on the RegExp object  Otherwise it would start validating from the position of the last match with that regex  even if the subject string is different   Some other ideas I had was be to enable you use arrays of regex s  and another rule for the negation of regex s      password   rules  add         regex               a-zA-Z   s  8 40                  a-z                    A-Z                    0-9                   regex    password 123        But implementing those would maybe be too much

User · Answer

You may use pattern defined in the additional-methods js file  Note that this additional-methods js file must be included after jQuery Validate dependency  then you can just use   x000D   x000D      frm   validate   x000D      rules    x000D          Textbox    x000D              pattern     a-zA-Z   s  1 40    x000D             x000D         x000D      messages    x000D          Textbox    x000D              pattern   The Textbox string format is invalid  x000D            x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 17 0 jquery validate js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery-validate 1 17 0 additional-methods min js  gt  lt  script gt  x000D   lt form id  frm  method  get  action    gt  x000D       lt fieldset gt  x000D           lt p gt  x000D               lt label for  fullname  gt Textbox lt  label gt  x000D               lt input id  Textbox  name  Textbox  type  text  gt  x000D           lt  p gt  x000D       lt  fieldset gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

No reason to define the regex as a string     validator addMethod       regex       function value  element  regexp            var check   false          return this optional element     regexp test value               Please check your input        and  telephone    required  true  regex       d s      minlength  5      tis better this way  no

User · Answer

As mentioned on the addMethod documentation   Please note  While the temptation is great to add a regex method that checks it s parameter against the value  it is much cleaner to encapsulate those regular expressions inside their own method  If you need lots of slightly different expressions  try to extract a common parameter  A library of regular expressions  http   regexlib com DisplayPatterns aspx  So yes  you have to add a method for each regular expression  The overhead is minimal  while it allows you to give the regex a name  not to be underestimated   a default message  handy  and the ability to reuse it a various places  without duplicating the regex itself over and over

User · Answer

we mainly use the markup notation of jquery validation plugin and the posted samples did not work for us  when flags are present in the regex  e g    lt input type  text  name  myfield  regex     0-9  3   i    gt    therefore we use the following snippet    validator addMethod           regex           function value  element  regstring                   fast exit on empty optional             if  this optional element                     return true                             var regParts   regstring match              gim                    if  regParts                       the parsed pattern had delimiters and modifiers  handle them                   var regexp   new RegExp regParts 1   regParts 2                  else                      we got pattern string without delimiters                 var regexp   new RegExp regstring                              return regexp test value                       Please check your input          Of course now one could combine this code  with one of the above to also allow passing RegExp objects into the plugin  but since we didn t needed it we left this exercise for the reader  -    PS  there is also bundled plugin for that  https   github com jzaefferer jquery-validation blob master src additional pattern js

User · Answer

This is working code   function validateSignup              validator addMethod               regex               function value  element  regexp                                 if  regexp constructor    RegExp                      regexp   new RegExp regexp                   else if  regexp global                      regexp lastIndex   0                  return this optional element     regexp test value                               Please check your input                   signupForm   validate                 onkeyup   false          errorClass   req mess           ignore    hidden           validClass   signup valid class           errorClass   signup error class            rules                         email                                required  true                  email  true                  regex     A-Za-z0-9      A-Za-z0-9      A-Za-z0-9                                  userId                                required  true                  minlength  6                  maxlength  15                  regex     A-Za-z0-9   6 15                                 phoneNum                                required  true                  regex      -  1  0-9  1 3  - 0-9  10                                        messages                         email                                 required   You must enter a email                   regex   Please enter a valid email without spacial chars  ie  Example gmail com                              userId                                required   Alphanumeric     min 6  max 15                   regex   Please enter any alphaNumeric char of length between 6-15  ie  sbp arun 2016                              phoneNum                                 required   Please enter your phone number                   regex   e g   91-1234567890                                          submitHandler  function  form                        return true

User · Answer

we mainly use the markup notation of jquery validation plugin and the posted samples did not work for us  when flags are present in the regex  e g    lt input type  text  name  myfield  regex     0-9  3   i    gt    therefore we use the following snippet    validator addMethod           regex           function value  element  regstring                   fast exit on empty optional             if  this optional element                     return true                             var regParts   regstring match              gim                    if  regParts                       the parsed pattern had delimiters and modifiers  handle them                   var regexp   new RegExp regParts 1   regParts 2                  else                      we got pattern string without delimiters                 var regexp   new RegExp regstring                              return regexp test value                       Please check your input          Of course now one could combine this code  with one of the above to also allow passing RegExp objects into the plugin  but since we didn t needed it we left this exercise for the reader  -    PS  there is also bundled plugin for that  https   github com jzaefferer jquery-validation blob master src additional pattern js

User · Answer

validator methods checkEmail   function  value  element             return this optional  element        a-z    a-z     a-z    test  value                  quot  myForm quot   validate           rules                email                    required  true                  checkEmail  true                                  messages                email   quot incorrect email quot

User · Answer

You can use the addMethod    e g     validator addMethod  postalCode   function  value         return      d 5 - d 4     d 5     A-Z  d A-Z  s d A-Z  d     test value        Please enter a valid US or Canadian postal code       good article here https   web archive org web 20130609222116 http   www randallmorey com blog 2008 mar 16 extending-jquery-form-validation-plugin

User · Answer

I had some trouble putting together all the pieces for doing a jQuery regular expression validator  but I got it to work    Here is a complete working example  It uses the  Validation  plugin which can be found in jQuery Validation Plugin   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8    gt       lt script src  http   YOURJQUERYPATH js jquery js  type  text javascript  gt  lt  script gt       lt script src  http   YOURJQUERYPATH js jquery validate js  type  text javascript  gt  lt  script gt       lt script type  text javascript  gt               ready function                   validator addMethod  EMAIL   function value  element                    return this optional element        a-zA-Z0-9  -    a-zA-Z0-9-     a-zA-Z   2 5   i test value                   Email Address is invalid  Please enter a valid email address                    validator addMethod  PASSWORD  function value element                   return this optional element             d       a-z        A-Z    8 16   i test value                  Passwords are 8-16 characters with uppercase letters  lowercase letters and at least one number                    validator addMethod  SUBMIT  function value element                   return this optional element           i test value                  You did not click the submit button                     Validate signup form on keyup and submit                 LOGIN   validate                   rules                        EMAIL   required EMAIL                       PASSWORD   required PASSWORD                       SUBMIT   required SUBMIT                                                       lt  script gt   lt  head gt   lt body gt       lt div id  LOGIN FORM  class  form  gt           lt form id  LOGIN  name  LOGIN  method  post  action   index secure authentication action login  gt               lt h1 gt Log In lt  h1 gt               lt div id  LOGIN EMAIL  gt                   lt label for  EMAIL  gt Email Address lt  label gt                   lt input id  EMAIL  name  EMAIL  type  text  value    tabindex  1    gt               lt  div gt               lt div id  LOGIN PASSWORD  gt                   lt label for  PASSWORD  gt Password lt  label gt                   lt input id  PASSWORD  name  PASSWORD  type  password  value    tabindex  2    gt               lt  div gt               lt div id  LOGIN SUBMIT  gt                   lt input id  SUBMIT  name  SUBMIT  type  submit  value  Submit  tabindex  3    gt               lt  div gt           lt  form gt       lt  div gt   lt  body gt   lt  html gt

User · Answer

Thanks to the answer of redsquare I added a method like this    validator addMethod     quot regex quot     function value  element  regexp        var re   new RegExp regexp       return this optional element     re test value           quot Please check your input  quot      Now all you need to do to validate against any regex is this     quot  Textbox quot   rules  quot add quot     regex   quot   a-zA-Z    s  1 40   quot      Additionally  it looks like there is a file called additional-methods js that contains the method  quot pattern quot   which can be a RegExp when created using the method without quotes   Edit The pattern function is now the preferred way to do this  making the example     quot  Textbox quot   rules  quot add quot     pattern   quot   a-zA-Z    s  1 40   quot       https   cdnjs com libraries jquery-validate  https   cdnjs cloudflare com ajax libs jquery-validate 1 19 2 jquery validate min js https   cdnjs cloudflare com ajax libs jquery-validate 1 19 2 additional-methods min js

User · Answer

As mentioned on the addMethod documentation   Please note  While the temptation is great to add a regex method that checks it s parameter against the value  it is much cleaner to encapsulate those regular expressions inside their own method  If you need lots of slightly different expressions  try to extract a common parameter  A library of regular expressions  http   regexlib com DisplayPatterns aspx  So yes  you have to add a method for each regular expression  The overhead is minimal  while it allows you to give the regex a name  not to be underestimated   a default message  handy  and the ability to reuse it a various places  without duplicating the regex itself over and over

User · Answer

I got it to work like this       validator addMethod       regex       function value  element  regexp            return this optional element     regexp test value               Please check your input          function              uiEmailAdress   focus            NewsletterForm   validate           rules                uiEmailAdress                   required  true                  email  true                  minlength  5                            uiConfirmEmailAdress                   required  true                  email  true                  equalTo    uiEmailAdress                             DDLanguage                   required  true                            Testveld                   required  true                  regex     0-9  3                                     messages                uiEmailAdress                   required   Verplicht veld                   email   Ongeldig emailadres                   minlength   Minimum 5 charaters vereist                             uiConfirmEmailAdress                   required   Verplicht veld                   email   Ongeldig emailadres                   equalTo   Veld is niet gelijk aan E-mailadres                             DDLanguage                   required   Verplicht veld                             Testveld                   required   Verplicht veld                   regex    REGEX                                        Make sure that the regex is between    -

User · Answer

I got it to work like this       validator addMethod       regex       function value  element  regexp            return this optional element     regexp test value               Please check your input          function              uiEmailAdress   focus            NewsletterForm   validate           rules                uiEmailAdress                   required  true                  email  true                  minlength  5                            uiConfirmEmailAdress                   required  true                  email  true                  equalTo    uiEmailAdress                             DDLanguage                   required  true                            Testveld                   required  true                  regex     0-9  3                                     messages                uiEmailAdress                   required   Verplicht veld                   email   Ongeldig emailadres                   minlength   Minimum 5 charaters vereist                             uiConfirmEmailAdress                   required   Verplicht veld                   email   Ongeldig emailadres                   equalTo   Veld is niet gelijk aan E-mailadres                             DDLanguage                   required   Verplicht veld                             Testveld                   required   Verplicht veld                   regex    REGEX                                        Make sure that the regex is between    -

User · Answer

Extending PeterTheNiceGuy s answer a bit     validator addMethod           regex           function value  element  regexp                if  regexp constructor    RegExp                  regexp   new RegExp regexp               else if  regexp global                  regexp lastIndex   0              return this optional element     regexp test value                       Please check your input        This would allow you to pass a regex object to the rule      Textbox   rules  add     regex     a-zA-Z   s  1 40          Resetting the lastIndex property is necessary when the g-flag is set on the RegExp object  Otherwise it would start validating from the position of the last match with that regex  even if the subject string is different   Some other ideas I had was be to enable you use arrays of regex s  and another rule for the negation of regex s      password   rules  add         regex               a-zA-Z   s  8 40                  a-z                    A-Z                    0-9                   regex    password 123        But implementing those would maybe be too much

[jquery] jQuery validate: How to add a rule for regular expression validation?

Examples related to jquery

Examples related to regex

Examples related to jquery-validate