jQuery Validate-“要么跳过这些字段，要么至少填充其中的X个"

问题描述

我在表单上使用 jQuery验证插件.我有一些可选的字段组，但必须为全部或全部"-如果您在一组中填写一个输入，则必须全部填写.

I'm using the jQuery Validation plugin on my forms. I have some groups of fields that are optional, but need to be either "all or nothing" - if you fill one input in a group, you must fill all of them.

例如，假设用户可以输入一个位置-街道，城市，州和邮政编码-或多个位置.您不必输入第二个位置，但是如果您输入第二个位置，则不能只给城市一个位置.我也需要该州的邮政编码.

For example, imagine the user can input one location - street, city, state, and zip - or multiple locations. You don't have to enter a second location, but if you do, it's not OK to just give the city; I need the state and zip for that one too.

为解决此问题，我编写了一个自定义规则-实际上只是对，require_from_group.这称为skip_or_fill_minimum.使用方法如下:

To solve this problem, I wrote a custom rule - really just a tiny tweak of my previous rule, require_from_group. This one is called skip_or_fill_minimum. Here's how you'd use it:

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

以下是自定义规则的代码:

Here's the code for the custom rule:

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."));

我主要是为了发布此内容，以便其他在网络上搜索解决方案的人都能找到它.还是-有没有人看到改善这一点的方法?

I'm primarily posting this so that others who search the web for a solution will find it. Still - does anyone see a way to improve this?

这是正式添加到jQuery验证(2012年4月3日)

This was officially added to jQuery Validation on 4/3/2012.

推荐答案

我经过简化和优化"的版本(更多链接+使用验证器自定义提供的选择器).并希望减少选择操作.

My shortened and "optimized" version (more chaining + use of validator custom provided selector). And hopefully makes less selection operations.

仍然遭受与规则相同的错误困扰-我的意思是，删除error类和与我们的选择器匹配的所有元素上的错误标签并不是真正正确的.试想一下，您需要设置4个字段，但是有5个.用户填写4个字段.他留下的第五个空缺，但在该字段上还设置了required和email.这样，尽管电子邮件的错误消息也没有得到解决，但它也被清除了.

Still suffers from the same bugs your rule does -- what I mean is that the removing of the error class and the error labels on all elems which match our selector is not really correct. Just imagine you require 4 fields to be set but there are 5. User fills 4 fields. The fifth he leaves unfilled but on that field you additionally set required and email. This way the error-message for the email too gets removed although he didn't resolve it yet.

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."));

这篇关于jQuery Validate-“要么跳过这些字段，要么至少填充其中的X个"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！