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:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="salutation"  value="1" />

This doesn't work, but is what I'm aiming for:

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" />

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

score 88 · Accepted Answer · answered May 06 '10 at 11:07

88

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
});

answered May 06 '10 at 11:07

Nick Craver

623,446
136
1,297
1,155

11

I tried this but it only adds the rule for the first checkbox with class checkBox. Is there something like a .each() enumerator required? – littlegreen May 10 '11 at 14:25
2

This works though: http://stackoverflow.com/questions/5748346/jquery-validate-plugin-cant-validate-classes – littlegreen May 10 '11 at 14:28
2

@littlegreen, .each(function() { $(this).rules("add", someOption); }) can work – Allen Nov 09 '13 at 16:56
I get only one error message for the same class error fields by this method. Am I missing something or that's the way supposed to be? – Jeaf Gilbert Jun 21 '14 at 18:02
Nvm, I missed defining unique names for the elements which is required. Thx though. – Jeaf Gilbert Jun 22 '14 at 07:31
Cool. how do I add custom messages though? – Naguib Ihab Jan 30 '15 at 10:24
@littlegreen you are correct - Marked answer on this page works only for single input field - and example in link which you posted, works for all input fields. Thanks! P.S (In my use case i worked with input fields and not checkbox-es). – Игор Oct 08 '15 at 12:30

score 43 · Answer 2 · answered Nov 21 '12 at 13:36

43

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.

answered Nov 21 '12 at 13:36

RicardoS

2,088
1
21
22

This is a better solution, though I don't know why you can't pass it through the settings – Dominic Mar 16 '15 at 15:40
@RicardoS Does this still work? For some reason I can not get it to function. Is there another method that can do the same thing? – Oct 02 '20 at 04:59
2

@saleem I'm really not sure. I haven't used it lately and the answer was 8 years ago. BUT checking their documentation, this is still there: https://jqueryvalidation.org/jQuery.validator.addClassRules/ – RicardoS Oct 02 '20 at 13:36

score 15 · Answer 3 · answered Aug 16 '14 at 09:32

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.

score 6 · Answer 4 · answered Aug 10 '11 at 12:46

6

Here's the solution using jQuery:

    $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });

answered Aug 10 '11 at 12:46

Ajay Sharma

77
1
1

Did you test this code? It makes all checkboxes with the class "checkbox" required. – Brien Malone Jan 17 '12 at 23:39
1

down voted for using each function where addClassRules would have worked perfectly. – Pratheek Rebala Apr 11 '13 at 11:53
required: function(elem){ return ($('input:checkbox.checkBox:checked').length == 0); }, Could improve it. – Jaikrat May 14 '15 at 12:29

score 3 · Answer 5 · answered May 06 '10 at 10:30

Here's my solution (requires no jQuery... just JavaScript):

function argsToArray(args) {
  var r = []; for (var i = 0; i < 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 >= 4)
      checkbox.checked = false;
  }, null, checkbox, salutation), false);
});

Put this in a script block at the end of <body> 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):

<!DOCTYPE html><html><body>
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<input type="checkbox" class="salutation">
<script>
    function argsToArray(args) {
      var r = []; for (var i = 0; i < 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 >= 3)
          checkbox.checked = false;
      }, null, checkbox, salutation), false);
    });
</script></body></html>

Hi, that's brilliant - thanks for your response Delan, however, the rest of the form (which I haven't shown) uses jQuery as well - so I'd prefer it if I can use jQuery in this example, because it all needs to be validated at the same time. — Matt, May 06 '10 at 10:42

score 1 · Answer 6 · answered Dec 20 '12 at 18:23

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
        });
    });
});

score 1 · Answer 7 · answered Apr 19 '13 at 08:08

If you want add Custom method you can do it

(in this case, at least one checkbox selected)

<input class="checkBox" type="checkbox" id="i0000zxthy" name="i0000zxthy"  value="1" onclick="test($(this))"/>

in Javascript

var tags = 0;

$(document).ready(function() {   

    $.validator.addMethod('arrayminimo', function(value) {
        return tags > 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--;
    }
}

score 0 · Answer 8 · answered Dec 13 '21 at 19:13

If you need to set up multpile class rules you can do it like this:

jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

source: https://jqueryvalidation.org/jQuery.validator.addClassRules/

Disclaimer: Yes, I know it's 2021 and you shouldn't be using jQuery but, sometimes we have to. This information was really useful to me, so I hope to help some eventual random stranger who has to maintain some legacy system somewhere.

score 0 · Answer 9 · answered Jan 13 '22 at 22:12

0

$(".ClassName").each(function (item) {
    $(this).rules("add", {
        required: true,
    });
});

answered Jan 13 '22 at 22:12

Mehran Ahmadifar

1
3

score 0 · Answer 10 · answered Mar 22 '23 at 02:40

If you want to require a named field if it has a certain class, I like to do it this way:

HTML

<form id="myForm">
    <input type="text" name="requiredField[]" class="requiredField">
    <input type="text" name="requiredField[]">
</form>

jQuery

$("#myForm").validate({
    rules: {
        "requiredField[]": {
            required: function(element) {
                return $(element).hasClass("requiredField");
            },
            normalizer: function(value) {
                return $.trim(value);
            }
        }
     }
 });

That way you can limit it to the named fields of one form - avoiding interference with other forms - and it supports class changes to fields dynamically, or after the DOM loads. In this example, the first field would be required, while the second one would not be.

jQuery Validation using the class instead of the name value

10 Answers10

Linked

Related