发表新帖
发表新帖

jQuery Validation using the class instead of the name value

前端 未结
关注
7 1229
清酒与你
清酒与你 2020-11-29 00:09

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. Sp

相关标签:
7条回答
  • 伪装坚强ぢ
    2020-11-29 00:41

    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>
    0 讨论(0)
  • 执笔经年
    2020-11-29 00:44

    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--;
    }
}
    0 讨论(0)
  • 终归单人心
    2020-11-29 00:54

    Here's the solution using jQuery:

        $().ready(function () {
        $(".formToValidate").validate();
        $(".checkBox").each(function (item) {
            $(this).rules("add", {
                required: true,
                minlength:3
            });
        });
    });
    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-29 00:56

    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
});
    0 讨论(0)
  • 清歌不尽
    2020-11-29 00:56

    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.

    0 讨论(0)
  • 野性不改
    2020-11-29 01:04

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题