jQuery Validation using the class instead of the name value

Question

I d like to validate a form using the jquery validate plugin  but I m unable to use the  name  value within the html - as this is a field also used by the server app  Specifically  I need to limit the number of checkboxes checked from a group   Maximum of 3   All of the examples I have seen  use the name attribute of each element  What I d like to do is use the class instead  and then declare a rule for that   html  This works      lt input class  checkBox  type  checkbox  id  i0000zxthy  name  salutation   value  1    gt    This doesn t work  but is what I m aiming for    lt input class  checkBox  type  checkbox  id  i0000zxthy  name  i0000zxthy   value  1    gt    javascript   var validator       formToValidate   validate           rules             salutation                   required true                          checkBox                   required true              minlength 3                    Is it possible to do this - is there a way of targeting the class instead of the name within the rules options  Or do I have to add a custom method   Cheers  Matt

User · Answer

Here s the solution using jQuery           ready function                  formToValidate   validate                checkBox   each function  item                  this  rules  add                     required  true                  minlength 3

User · Answer

I know this is an old question  But I too needed the same one recently  and I got this question from stackoverflow   another answer from this blog  The answer which was in the blog was more straight forward as it focuses specially for this kind of a validation  Here is how to do it     validator addClassRules  price          required  true       minlength  2       This method does not require you to have validate method above this call   Hope this will help someone in the future too  Source here

User · Answer

If you want add Custom method you can do it   in this case  at least one checkbox selected    lt input class  checkBox  type  checkbox  id  i0000zxthy  name  i0000zxthy   value  1  onclick  test   this     gt    in Javascript  var tags   0     document  ready function               validator addMethod  arrayminimo   function value            return tags  gt  0         Selezionare almeno un Opzione           validator addClassRules  check secondario             arrayminimo  true                validaFormRichiesta         function validaFormRichiesta             form   validate                             function test n        if  n prop  checked              tags          else           tags--

User · Answer

Another way you can do it  is using addClassRules  It s specific for classes  while the option using selector and  rules is more a generic way   Before calling     form  validate     Use like this   jQuery validator addClassRules  myClassName             required  true             other rules              Ref  http   docs jquery com Plugins Validation Validator addClassRules namerules  I prefer this syntax for a case like this

User · Answer

Since for me  some elements are created on page load  and some are dynamically added by the user  I used this to make sure everything stayed DRY   On submit  find everything with class x  remove class x  add rule x       form   on  submit   function e            alphanumeric dash   each function             var  this     this            this removeClass  alphanumeric dash              this  rules  add                 alphanumeric dash  true

User · Answer

You can add the rules based on that selector using  rules  add   options   just remove any rules you want class based out of your validate options  and after calling     formToValidate   validate           do this       checkBox   rules  add        required true      minlength 3

User · Answer

Here s my solution  requires no jQuery    just JavaScript    function argsToArray args      var r       for  var i   0  i  lt  args length  i        r push args i      return r    function bind       var initArgs   argsToArray arguments     var fx          initArgs shift      var tObj        initArgs shift      var args        initArgs    return function         return fx apply tObj  args concat argsToArray arguments            var salutation   argsToArray document getElementsByClassName  salutation     salutation forEach function checkbox      checkbox addEventListener  change   bind function checkbox  salutation        var numChecked   salutation filter function checkbox    return checkbox checked     length      if  numChecked  gt   4        checkbox checked   false       null  checkbox  salutation   false         Put this in a script block at the end of  lt body gt  and the snippet will do its magic  limiting the number of checkboxes checked in maximum to three  or whatever number you specify    Here  I ll even give you a test page  paste it into a file and try it     lt  DOCTYPE html gt  lt html gt  lt body gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt input type  checkbox  class  salutation  gt   lt script gt      function argsToArray args          var r       for  var i   0  i  lt  args length  i            r push args i          return r            function bind           var initArgs   argsToArray arguments         var fx          initArgs shift          var tObj        initArgs shift          var args        initArgs        return function             return fx apply tObj  args concat argsToArray arguments                        var salutation   argsToArray document getElementsByClassName  salutation         salutation forEach function checkbox          checkbox addEventListener  change   bind function checkbox  salutation            var numChecked   salutation filter function checkbox    return checkbox checked     length          if  numChecked  gt   3            checkbox checked   false           null  checkbox  salutation   false            lt  script gt  lt  body gt  lt  html gt

[javascript] jQuery Validation using the class instead of the name value

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css

Examples related to jquery-validate