jQuery Validate Plugin - How to create a simple custom rule

Question

How do you create a simple  custom rule using the jQuery Validate plugin  using addMethod  that doesn t use a regex   For example  what function would create a rule that validates only if at least one of a group of checkboxes is checked

User · Answer

add a method  calls one built-in method  too  jQuery validator addMethod  optdate   function value  element            return jQuery validator methods  date   call              this value element            value    0000 00 00            Please enter a valid date          connect it to a css class jQuery validator addClassRules       optdate     optdate   true

User · Answer

You can add a custom rule like this      validator addMethod       booleanRequired       function  value  element  requiredValue            return value     requiredValue              Please check your input        And add it as a rule like this    PhoneToggle        booleanRequired   on

User · Answer

You can create a simple rule by doing something like this   jQuery validator addMethod  greaterThanZero   function value  element        return this optional element      parseFloat value   gt  0         Amount must be greater than zero      And then applying this like so      validatorElement   validate       rules             amount     greaterThanZero   true               Just change the contents of the  addMethod  to validate your checkboxes

User · Answer

Thanks  it worked   Here s the final code     validator addMethod  greaterThanZero   function value  element        var the list array       some form  super item checked        return the list array length  gt  0        Please check at least one check box

User · Answer

You can add a custom rule like this      validator addMethod       booleanRequired       function  value  element  requiredValue            return value     requiredValue              Please check your input        And add it as a rule like this    PhoneToggle        booleanRequired   on

User · Answer

add a method  calls one built-in method  too  jQuery validator addMethod  optdate   function value  element            return jQuery validator methods  date   call              this value element            value    0000 00 00            Please enter a valid date          connect it to a css class jQuery validator addClassRules       optdate     optdate   true

User · Answer

document  ready function        var response        validator addMethod           uniqueUserName            function value  element                  ajax                   type   POST                   url   http     location host   checkUser php                   data   checkUsername   value                  dataType  html                   success  function msg                                          If username exists  set response to true                     response     msg     true      true   false                                                 return response                      Username is Already Taken                  regFormPart1   validate           username                required  true              minlength  8              uniqueUserName  true                    messages                username                    required   Username is required                   minlength   Username must be at least 8 characters                   uniqueUserName   This Username is taken already

User · Answer

You can create a simple rule by doing something like this   jQuery validator addMethod  greaterThanZero   function value  element        return this optional element      parseFloat value   gt  0         Amount must be greater than zero      And then applying this like so      validatorElement   validate       rules             amount     greaterThanZero   true               Just change the contents of the  addMethod  to validate your checkboxes

User · Answer

Thanks  it worked   Here s the final code     validator addMethod  greaterThanZero   function value  element        var the list array       some form  super item checked        return the list array length  gt  0        Please check at least one check box

User · Answer

Custom Rule and data attribute  You are able to create a custom rule and attach it to an element using the data attribute using the syntax data-rule-rulename  true    So to check if at least one of a group of checkboxes is checked   data-rule-oneormorechecked   lt input type  checkbox  name  colours    value  red  data-rule-oneormorechecked  true    gt    addMethod    validator addMethod  oneormorechecked   function value  element       return    input name      element name       checked   length  gt  0      Atleast 1 must be selected      And you can also override the message of a rule  ie  Atleast 1 must be selected  by using the syntax  data-msg-rulename  my new message    NOTE  If you use the data-rule-rulename method then you will need to make sure the rule name is all lowercase  This is because the jQuery validation function dataRules applies  toLowerCase   to compare and the HTML5 spec does not allow uppercase   Working Example   x000D   x000D    validator addMethod  oneormorechecked   function value  element    x000D    return    input name      element name       checked   length  gt  0  x000D      Atleast 1 must be selected    x000D   x000D      validate   validate    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 14 0 jquery validate min js  gt  lt  script gt  x000D   x000D   lt form class  validate  gt  x000D      red lt input type  checkbox  name  colours    value  red  data-rule-oneormorechecked  true  data-msg-oneormorechecked  Check one or more     gt  lt br  gt  x000D      blue lt input type  checkbox  name  colours    value  blue    gt  lt br  gt  x000D      green lt input type  checkbox  name  colours    value  green    gt  lt br  gt  x000D       lt input type  submit  value  submit   gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

document  ready function        var response        validator addMethod           uniqueUserName            function value  element                  ajax                   type   POST                   url   http     location host   checkUser php                   data   checkUsername   value                  dataType  html                   success  function msg                                          If username exists  set response to true                     response     msg     true      true   false                                                 return response                      Username is Already Taken                  regFormPart1   validate           username                required  true              minlength  8              uniqueUserName  true                    messages                username                    required   Username is required                   minlength   Username must be at least 8 characters                   uniqueUserName   This Username is taken already

User · Answer

Thanks  it worked   Here s the final code     validator addMethod  greaterThanZero   function value  element        var the list array       some form  super item checked        return the list array length  gt  0        Please check at least one check box

User · Answer

You can create a simple rule by doing something like this   jQuery validator addMethod  greaterThanZero   function value  element        return this optional element      parseFloat value   gt  0         Amount must be greater than zero      And then applying this like so      validatorElement   validate       rules             amount     greaterThanZero   true               Just change the contents of the  addMethod  to validate your checkboxes

User · Answer

Step 1 Included the cdn like       lt script src  quot https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js quot  gt  lt  script gt         lt script src  quot http   ajax aspnetcdn com ajax jquery validate 1 11 1 jquery validate min js quot  gt  lt  script gt   Step 2 Code Like     document  ready function               quot  submit quot   click function                        myform   validate      initialize the plugin                 rules                        id                            required  true                          email  true                                            password                            required  true                          minlength  1                                                          messages                        id                            required   quot Enter Email Id quot                                              password                            required   quot Enter Email Password quot                                                            submitHandler  function  form       for demo                     alert  valid form submitted       for demo                     return false     for demo

User · Answer

You can create a simple rule by doing something like this   jQuery validator addMethod  greaterThanZero   function value  element        return this optional element      parseFloat value   gt  0         Amount must be greater than zero      And then applying this like so      validatorElement   validate       rules             amount     greaterThanZero   true               Just change the contents of the  addMethod  to validate your checkboxes

User · Answer

Thanks  it worked   Here s the final code     validator addMethod  greaterThanZero   function value  element        var the list array       some form  super item checked        return the list array length  gt  0        Please check at least one check box

User · Answer

Step 1 Included the cdn like       lt script src  quot https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js quot  gt  lt  script gt         lt script src  quot http   ajax aspnetcdn com ajax jquery validate 1 11 1 jquery validate min js quot  gt  lt  script gt   Step 2 Code Like     document  ready function               quot  submit quot   click function                        myform   validate      initialize the plugin                 rules                        id                            required  true                          email  true                                            password                            required  true                          minlength  1                                                          messages                        id                            required   quot Enter Email Id quot                                              password                            required   quot Enter Email Password quot                                                            submitHandler  function  form       for demo                     alert  valid form submitted       for demo                     return false     for demo

User · Answer

For this case  user signup form  user must choose a username that is not taken    This means we have to create a customized validation rule  which will send async http request with remote server     create a input element in your html      lt input name  user name  type  text   gt     declare your form validation rules           form   validate       rules           user name                 here jquery validate will start a GET request  to               interface users is username valid user name  lt input value gt              the response should be  raw text   with content  true  or  false  only         remote    interface users is username valid                       the remote code should be like     class Interface  UsersController  lt  ActionController  Base   def is username valid     render  text   gt   User exists   user name   gt  params  user name     end end

User · Answer

For this case  user signup form  user must choose a username that is not taken    This means we have to create a customized validation rule  which will send async http request with remote server     create a input element in your html      lt input name  user name  type  text   gt     declare your form validation rules           form   validate       rules           user name                 here jquery validate will start a GET request  to               interface users is username valid user name  lt input value gt              the response should be  raw text   with content  true  or  false  only         remote    interface users is username valid                       the remote code should be like     class Interface  UsersController  lt  ActionController  Base   def is username valid     render  text   gt   User exists   user name   gt  params  user name     end end

User · Answer

Custom Rule and data attribute  You are able to create a custom rule and attach it to an element using the data attribute using the syntax data-rule-rulename  true    So to check if at least one of a group of checkboxes is checked   data-rule-oneormorechecked   lt input type  checkbox  name  colours    value  red  data-rule-oneormorechecked  true    gt    addMethod    validator addMethod  oneormorechecked   function value  element       return    input name      element name       checked   length  gt  0      Atleast 1 must be selected      And you can also override the message of a rule  ie  Atleast 1 must be selected  by using the syntax  data-msg-rulename  my new message    NOTE  If you use the data-rule-rulename method then you will need to make sure the rule name is all lowercase  This is because the jQuery validation function dataRules applies  toLowerCase   to compare and the HTML5 spec does not allow uppercase   Working Example   x000D   x000D    validator addMethod  oneormorechecked   function value  element    x000D    return    input name      element name       checked   length  gt  0  x000D      Atleast 1 must be selected    x000D   x000D      validate   validate    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 14 0 jquery validate min js  gt  lt  script gt  x000D   x000D   lt form class  validate  gt  x000D      red lt input type  checkbox  name  colours    value  red  data-rule-oneormorechecked  true  data-msg-oneormorechecked  Check one or more     gt  lt br  gt  x000D      blue lt input type  checkbox  name  colours    value  blue    gt  lt br  gt  x000D      green lt input type  checkbox  name  colours    value  green    gt  lt br  gt  x000D       lt input type  submit  value  submit   gt  x000D   lt  form gt  x000D   x000D   x000D

[javascript] jQuery Validate Plugin - How to create a simple custom rule?

Examples related to javascript

Examples related to jquery

Examples related to jquery-validate