jQuery验证 - 取决于批量?

时间:2015-04-02 18:38:04

标签: jquery jquery-validate

好吧,这可能是一个愚蠢的问题,但是有没有办法根据一些外部值来确定哪些字段(不是表单组)是必需的 - 没有做(膨胀/冗余)取决于EVERY的规则场?

假设我有一个表格,里面有复选框,表明一个人有什么车辆(汽车,摩托车,船)。如果他们检查车厢,则显示汽车领域(品牌,型号,年份等)。如果检查摩托车箱,则显示摩托车领域(品牌,型号,发动机等)。等等..

因此,根据检查这3个复选框中的哪一个,我想验证相应的字段。我怎么能这样做,而不是依赖于每个字段/规则?

每种车型的规则是否可以存储在3个预设阵列中,然后根据复选框选择添加/删除?像这样非常简化的版本:

var car_rules_array = {
  car_make: {
    required:true
  },
  car_model: {
    required:true
  },
  car_year: {
    required:true

  },
  car_purchased: {
    required: true,
    date: true
  },
  car_vin: {
    required: true,
    remote: {
     url: blah..
    } 
  }
}


var boat_rules_array = {
  boat_make: {
    required:true
  },
  boat_model: {
    required:true
  },
  boat_year: {
    required:true

  },
  boat_purchased: {
    required: true,
    date: true
  },
  boat_sn: {
    required: true,
    remote: {
     url: blah..
    } 
  }
}


if ($('#has_car').is(':checked') == true) {

  $('#TheForm').addrules(car_rules_array);

} else {

  $('#TheForm').removerules(car_rules_array);

}

我没有得到它。

谢谢!

3 个答案:

答案 0 :(得分:1)

使用.rules('add').rules('remove')动态控制没有depends属性的规则。

if ($('#has_car').is(':checked') == true) {

    // use .rules('add')

    $('#fieldID').rules('add', {
        required: true,
        // another rule,...
    });

} else {

    // use .rules('remove')

    $('#fieldID').rules('remove', 'required');

}

请参阅:http://jqueryvalidation.org/rules/


修改

基于已编辑的OP的回应。

不,您无法使用.validate()方法动态更改规则。调用.validate()后,插件会在您的表单上初始化,您无法再次调用它...它只是被忽略了。这就是开发人员为您提供.rules()方法的原因。

由于.rules()附加到字段并且.validate()附加到表单,因此您无法交换其对象文字。前者只是一个规则列表(对于一个字段),后者是所有字段名称及其规则的列表。

我唯一可以建议的可能是让它更有效率就是在每组字段上放置一个公共类。与carboat一样。然后,您可以使用.each()一次定位多个字段。不完美,但你明白了,可能会有创意......

$('.car').each(function() {
    $(this).rules('add', {
        required: true,
        // another rule,...
    });
});

您的字段都有required规则。如果您只是简单地切换该规则,那么其他规则只会在填写该字段时发挥作用,否则将被忽略。


编辑2:

如果您隐藏并显示这些字段,则可能根本不需要担心切换任何规则。默认情况下,插件会忽略隐藏或隐藏在隐藏元素中的任何字段上的所有规则。

答案 1 :(得分:0)

@Sparkey:

哇。我看到你的$(' .car')。每个..代码,就像" Holly Shot!那就是它!"然后,遗憾的是,我意识到它毕竟不会起作用。问题在于(例如)可以检查汽车复选框(显示的字段),部分填写的字段,然后取消选中复选框(隐藏字段)。它们不是必需的,因为删除了所需的规则,但是现在隐藏的字段仍然具有可能使其他(不是必需的)规则失败的值。

虽然基于类的解决方案会更好更清洁,但我认为这里唯一的选择是通过数组/每个添加/删除所有规则:

function addrules(rulearr) {

  for (var field in rulearr) {

     $('#'+field).rules('add', rulearr[field]);

 }

}

function removerules(rulearr) {

  for (var field in rulearr) {

     $('#'+field).rules('remove');

  }

}

改变......

if ($('#has_car').is(':checked') == true) {

  $('.car_fields').show();
  addrules(car_rules_array);

} else {

  removerules(car_rules_array);
  $('.car_fields').hide();

}

你同意吗?

感谢您的回复/时间!

答案 2 :(得分:-1)

只需创建另一个包含隐藏默认的子复选框的div。选择它们时显示它。

$('#car_check_box').on('click', function() {
  $('#car_sub_check_box').fadeToggle();
});