[英]Validating form using jQuery Form Validator on ajax post ()
[英]jQuery validator is validating against no longer existing form elements after ajax call
我有一个表单,它根据用户所做的某些选择动态添加或删除输入字段。
基本形式如下所示,简化后:
<form action="...some/path..." id="MyForm" method="post">
<!-- the first input field is a select list, depending on the selected option, an ajax call will be made to update the div below with new input fields -->
<select name="selectList">
<option>#1</option>
<option>#2</option>
<option>#3</option>
<option>...</option>
</select>
<div id="UpdateThisSection"></div>
<input type="submit" value="Submit">
</form>
根据用户从选择列表中选择的选项,用户将看到不同的输入字段,这些字段呈现在#UpdateThisSection
div 中。
选项 #1 的输入字段为:
required
属性设置为输入字段,以及自定义data-type="Date"
属性required
属性选项#2 的输入字段为:
required
属性集required
属性集选项 #3 的输入字段为:
required
属性集required
属性集,以及自定义data-type="Numeric"
属性jquery 验证是这样实现的:
$("#MyForm").validate();
$.validator.addMethod("usDate",
function (value, element) {
return value.match(/^(0?[1-9]|1[0-2])[/., -](0?[1-9]|[12][0-9]|3[0-1])[/., -](19|20)?\d{2}$/);
},
"Please enter a valid date."
);
$("input[data-type='Date']").each(function () {
if ($(this).prop("required")) {
$(this).rules("add",
{
usDate: true
});
}
});
$("input[data-type='Numeric']").each(function () {
$(this).rules("add",
{
number: true
});
});
如果我打开表单并选择任何选项,验证工作得非常好。 正在以应有的方式验证表单。 但是,如果我改变主意并从下拉列表中选择不同的选项,表单将不再正确验证。 在提交时,我看到表单正在根据之前表单的要求进行验证。
查看控制台上的$("#MyForm").validate()
对象, invalid
以及submitted
属性仍然保存着前一个表单的信息。 每当新的 ajax 调用加载新的表单元素时,重置验证器的最简单方法是什么?
我尝试使用$("#MyForm").validate().resetForm();
重置表单$("#MyForm").validate().resetForm();
但它没有清除上面提到的属性。
尝试按照此 stackoverflow-post 中的建议清除验证也没有解决我的问题。
每当新的 ajax 调用加载新的表单元素时,重置验证器的最简单方法是什么?
在 Ajax success
回调中,从元素中删除所有静态规则
$("#MyForm").rules( "remove" );
// Then add or re-add some static rules...
抱歉...无法轻松地为演示重新创建它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.