根据Ajax请求添加/删除jQuery验证规则

时间:2018-10-11 14:23:39

标签: javascript jquery validation dynamic rules

我在基于Ajax Get请求更改jQuery Validation中的特定规则时遇到问题。

我有一个由一个父表单和两个子表单组成的表单,这些表单由Jquery.post请求更新。这两个子表单在提交后会更新一个保存在其各自隐藏输入中的计数器,并在两个计数器都需要至少注册一项的条件下进行验证。 直到规则变得更复杂为止。

现在,根据保存的第一个子表单的项目值,必须激活或不激活“最小”规则。

示例:这些项目的代码值在200到500之间;如果至少有一个项目注册的代码大于或等于300,则必须应用“最小”规则,否则不需要此规则。问题是必须动态地解决它,因为如果从第一个子表单列表中删除了代码> = 300的项目,或者如果没有任何具有该代码值的项目,然后保存其中一个代码,则验证规则必须更新。

我尝试过在$ .post成功函数返回时更新规则,它只会添加规则,而不会删除它:

$.get('{url of the updating form}', function(data){
    if (data >=300) {
       $('#counter_form_child_2').rules('add', { min: 1 });
    } else {
       $('#counter_form_child_2').rules('remove'); //removes all rules for this input
    }
});

试图进行查询以返回布尔(真或假)查询,以查找是否存在代码> = 300的任何项目并将其放入另一个隐藏字段:

//Code inside the js function that returns the boolean value
$.get('{url of the updating form}', function(data) {
     $('#item_above_300').val(data); //puts value into hidden field
});

//Code inside form validation rules
$("#parentForm").validate({
   ignore: ':hidden:not(#counter_form_child1, #counter_form_child1),
   rules : {
      (...)
      counter_child_form1: { min: 1 },
      counter_child_form2: { 
         min: { param: 1,
           depends: function(element) {
               return $('#item_above_300').val() === 1;
           }
         }
       }
     }
});

我需要一些帮助,因为我很想尝试几种替代方法,但没有任何效果。非常感谢!

1 个答案:

答案 0 :(得分:0)

最后,问题实际上不在规则上...
使用showErrors测试有效字段,我可以调试并发现隐藏字段正在正确更新,并且错误已被排除:

showErrors: function(errorMap, errorList) {
   var submitted = true;
   if (submitted) {
      var summary = "Precisa corrigir os seguintes erros: <br/>";
      $.each(errorMap, function(name, value) { 
         summary += " * (" + name +  + value + "<br/>"; 
      });                   
      $("#msg_aviso").html(summary);
      submitted = false;
   }
   this.defaultShowErrors();
}

然后我发现问题出在显示的errorMessage上。 并且仅在counter_child_form2消息中。 因此,在对Stack Overflow的一些问题进行研究之后,我发现该解决方案已重置DIV,该DIV在每个提交表单事件中均显示该特定错误消息。而且...瞧,它奏效了!

$('#parentForm').click(function(){
    $("#counter_child_form2_error .error").html('');
    $("#parentForm").submit();
});