Question

我有一个动态表单，我可以根据某些选择删除/添加元素。

每当我通过切换添加新元素时，我添加了他们的验证，这只是单向发生的。我可以保证

关于删除元素，$(form).valid()仍然有效 - 它有旧的验证但是它不会在DOM中找到元素，因此验证不会触发;
在重新添加元素时，重复验证是无害的，因为它只是覆盖了之前完全相同的内容？

换句话说，即使只使用单向验证，切换是否完全无害？它适用于我的测试，但我想确认。

此处，当您切换单选按钮3时，会添加/删除动态字段。如果你继续切换，我想你总是会替换相同的必需规则，而不是累积新规则。如果你隐藏它，验证仍然存在，但元素不在DOM中，因此Form有效（请参阅下面的控制台输出）。

＆＃13;

$('#form').validate({
    // No error messages, just highlight
    errorPlacement : function(error, element) {}
});
$('#form input').each(function(index, item) {
   $(item).rules('add', { required : true } );
});

$('input[type=radio][name=radiogroup').change(function() {
    if ( $(this).val() == '3') {
       $('#form').append('<input type="text" id="textDynamic" name="textDynamic"/><br/>');
       
       // One-Way Add Validation: always (re-)add validation for dynamic field
       $('#textDynamic').rules('add', { required : true } );
       // End One-Way Add Validation
       
    } else {
       $('#form #textDynamic').remove();
    }
});

$('#validate').click(function() {
   if ($('#form').valid())
    console.log('Valid');
   else
    console.log('Not valid');
});

＆＃13;

.error {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="form">
   Field 1: <input type="text" id="text1" name="text1"/><br/><br/>
   
   <input type="radio" id="radio1" name="radiogroup" value="1"/>Radio 1<br/>
   <input type="radio" id="radio2" name="radiogroup" value="2"/>Radio 2<br/>
   <input type="radio" id="radio3" name="radiogroup" value="3"/>Radio 3 (this toggles a new field)<br/>  
   
</form>

<button id="validate">Validate Form</button>

＆＃13;

jQuery验证（1）删除元素，（2）重新添加元素

0 个答案: