Jquery validate验证DOM中已有的表单字段以及动态添加的字段。但是,如果未动态添加的字段通过验证,则表单会提交忽略动态添加的字段。
这是我的代码:
$('#milestone-form').validate({ // initialize the plugin
rules: {
"milestone[]": {
required: true,
minlength: 3,
},
"deadline[]": {
required: true,
minlength: 3,
},
"amount[]": {
required: true,
minlength: 2,
},
},
submitHandler: function(form) {
var data = $("#milestone-form").serialize();
$.ajax({
type:"POST",
url:"ajax/scripts/crt_ms.php",
data:data,
success:function(data){
if(!data){alert("Something went wrong")}else{alert("Success")}
$(document).off();
},
});
},
});
//Validation End
$(document).on('click', ".add", function(){
$(flieds).insertAfter($(this).closest("#fields"));
$('.field').each(function() {
$(this).rules('add', {
required: true,
});
});
});
$(".save-ms").click(function(){
if($('#milestone-form').valid()){
//$("#milestone-form").submit();
alert("POSTED");
return false;
} else { alert("ERROR");}
});
我的所有<input>
元素都有class=".field"
属性。
另外,我注意到有一件事情,即所有动态字段都没有得到错误LABEL,而只是有一个类将它定义为无效。
我一整天都在努力做到这一点但却没有发生。
答案 0 :(得分:2)
很简单。 Jquery validate不会验证具有相同名称的多个元素。
我只需添加此内容。
$(document).ready(function(){
$.validator.prototype.checkForm = function () {
//overriden in a specific page
this.prepareForm();
for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
if (this.findByName(elements[i].name).length != undefined && this.findByName(elements[i].name).length > 1) {
for (var cnt = 0; cnt < this.findByName(elements[i].name).length; cnt++) {
this.check(this.findByName(elements[i].name)[cnt]);
}
} else {
this.check(elements[i]);
}
}
return this.valid();
},
};
答案 1 :(得分:0)
在您自己的回答中,您通过DOM元素进行了大量重复搜索。 你在至少四次dom搜索时进行了每次循环迭代,有时甚至只是简单的长度变量。
这会给浏览器带来不必要的负担。此外,我建议使用本机jQuery函数来帮助您迭代这些循环,然后使用一些范围来帮助您存储相关的引用,例如验证器。
建议阅读:
What is the scope of variables in JavaScript?
Performance of jQuery selectors vs local variables
$.validator.prototype.checkForm = function () {
//overriden in a specific page
this.prepareForm();
// Scoped variable.
var that = this;
$(this.elements).each(function(index,elem) {
// Search only once. big speed improv
var seek = that.findByName(elem.name);
// undefined and 0 is false by default
if (seek.length && seek.length > 1) {
seek.each(function(index,duplicate) {
// Notice the use the reference that from the outerscope.
// `that` int his case refers to the the validator object.
that.check(duplicate);
});
}
else {
that.check(seek);
}
});
};
$(document).ready(function(){
$('#milestone-form').validate({ // initialize the plugin
rules: {
"milestone[]": {
required: true,
minlength: 3,
},
"deadline[]": {
required: true,
minlength: 3,
},
"amount[]": {
required: true,
minlength: 2,
},
},
submitHandler: function(form) {
var data = $("#milestone-form").serialize();
$.ajax({
type:"POST",
url:"#",
data:data,
success:function(data){
if(!data){alert("Something went wrong")};
$(document).off();
},
});
},
});
// ===========================================================================
$.validator.prototype.checkForm = function () {
//overriden in a specific page
this.prepareForm();
// Scoped variable.
var that = this;
$(this.elements).each(function(index,elem) {
// Search only once. big speed improv
var seek = that.findByName(elem.name);
// undefined and 0 is false by default
if (seek.length && seek.length > 1) {
seek.each(function(index,duplicate) {
// Notice the use the reference that from the outerscope.
// `that` int his case refers to the the validator object.
that.check(duplicate);
});
}
else {
that.check(seek);
}
});
};
// ===========================================================================
var form= "<div id='fields'> <input type='text' name='milestone[]' placeholder='Milestone'> <input type='text' name='deadline[]' placeholder='Deadline'> <input type='text' name='amount[]' placeholder='Amount'> <input type='text' name='p[]' value='1' style='display:none;'> <span class='add halflings-icon plus'>+</span> <span class='remove halflings-icon minus'>-</span> </div>"
$(document).on('click', ".add", function(){
$(form).insertAfter($(this).closest("#fields"));
});
$(document).on('click', ".remove", function(){
$(this).closest('div').remove();
});
$(".save-ms").click(function(evt){
evt.preventDefault();
if($('#milestone-form').valid()){
alert("POSTED");
return false;
} else { alert("All Fields are required");}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form method="post" id="milestone-form">
<div id="fields" style="width:100%;">
<input type="text" name="milestone[]" placeholder="Milestone">
<input type="text" name="deadline[]" placeholder="Deadline">
<input type="text" name="amount[]" placeholder="Amount">
<input type="text" name="p[]" value="1" style="display:none;">
<span class="add halflings-icon plus">+</span>
</div>
<input type="submit" name="save-ms" class="btn btn-primary save-ms" value="Create">
</form>