jQuery 验证 - "Either skip these fields, or fill at least X of them"

Question

我正在使用jQuery Validation plugin在我的表格上。我有一些字段组是可选的，但必须是“全部或全无” - 如果您在一组中填写一个输入，则必须填写所有这些字段。

例如，假设用户可以输入一个位置(街道、城市、州和邮政编码)或多个位置。你不必输入第二个位置，但如果你这样做了，只给出城市是不行的；我也需要那个的州和邮政编码。

为了解决这个问题，我编写了一个自定义规则 - 实际上只是 my previous rule 的一个微小调整。 ，require_from_group。这个称为skip_or_fill_minimum。使用方法如下:

var validationrules = {
  rules: {
    location2address: {
    skip_or_fill_minimum: [4,'.location2']
  }
  //This input will validate if all 4 `.location2` inputs are filled,
  //or if all of them are left blank
}

var validator = $("#formtovalidate").validate(validationrules);  

这是自定义规则的代码:

jQuery.validator.addMethod("skip_or_fill_minimum", function(value, element, options) {
    var numberRequired = options[0];
    var selector = options[1];
    //Look for our selector within the parent form
    var numberFilled = $(selector, element.form).filter(function() {
         // Each field is kept if it has a value
         return $(this).val();
      }).length;
      var valid = numberFilled >= numberRequired || numberFilled === 0;

    //The elegent part - this element needs to check the others that match the
    //selector, but we don't want to set off a feedback loop where all the
    //elements check all the others which check all the others which
    //check all the others...
    //So instead we
    //  1) Flag all matching elements as 'currently being validated'
    //  using jQuery's .data()
    //  2) Re-run validation on each of them. Since the others are now
    //     flagged as being in the process, they will skip this section,
    //     and therefore won't turn around and validate everything else
    //  3) Once that's done, we remove the 'currently being validated' flag
    //     from all the elements
    if(!$(element).data('being_validated')) {
      var fields = $(selector, element.form);
      //.valid() means "validate using all applicable rules" (which includes this one)
      fields.data('being_validated', true);
      fields.validate(); //Changed from fields.valid();
      fields.data('being_validated', false);
    }
    return valid;
    // {0} below is the 0th item in the options field
    }, jQuery.format("Please either skip these fields or fill at least {0} of them."));

我发布此内容主要是为了让其他在网络上搜索解决方案的人能够找到它。仍然 - 有人找到改进的方法吗？

更新 - 现在是 jQuery 验证的一部分

这是 officially added to jQuery Validation 2012 年 4 月 3 日。

Answer 1

我的缩短和“优化”版本(更多链接+使用验证器自定义提供的选择器)。希望能够减少选择操作。

仍然遇到与您的规则相同的错误 - 我的意思是删除 error 类以及与我们的选择器匹配的所有元素上的错误标签并不真正正确。想象一下您需要设置 4 个字段，但实际有 5 个字段。用户填写了 4 个字段。第五个他未填写，但在该字段中您还设置了必需和电子邮件。这样，电子邮件的错误消息也被删除，尽管他还没有解决它。

jQuery.validator.addMethod("skip_or_fill_minimum", function(value, element, options) {
    var elems = $(element).parents('form').find(options[1]);
    var numberFilled = elems.filter(':filled').size();
    if (numberFilled >= options[0] || numberFilled == 0) {
        elems.removeClass('error');
        elems.next('label.error').not('.checked').text('').addClass('checked');
        return true;
    } else {
        elems.addClass('error');
    }
}, jQuery.format("Please either skip these fields or fill at least {0} of them."));