使用jquery的克隆验证部分工作 [英] Clone validation using jquery partially working
问题描述
- 最初当用户单击下一步按钮时，它将显示消息
，因为您错过了7个字段。 - 如果用户点击添加更多按钮，它将获得克隆，而没有
填写任何必填字段，如果用户点击下一步按钮。
消息仍显示您错过了7个字段。请在
提交之前填写 - 一旦用户开始填充克隆的字段中的任何字段，他
错过了克隆和原始div的其余必填字段
function check_for_validation_removal（element）{
var parent_div = $（element）.closest（div.cloned-row1，div.cloned-row2，div.cloned-row3，div.cloned-row4，div.cloned-row5 ）.find（input [type ='text']，＃txt_schName option：selected）;
console.log（parent_div）;
console.log（parent_div.length）;
var invalid_ele = 0;
parent_div.each（function（）{
if（$（this）.val（）。trim（）。length == 0）{
invalid_ele = invalid_ele + 1;
}
}）;
console.log（invalid_ele）;
if（parent_div.length == invalid_ele）{
parent_div.each（function（）{
$（this）.removeClass（required_field）;
$ .rules（'remove'）;
}）;
bind_validation（）;
update_errors（）;
}
}
我尝试添加选择器在更改仍然没有运气。
$（'。cloned_field'）。on（'input'，'。cloned_div'，function（e）{
if（$（this）.val（）。trim（）。length> 0）
{
$（this）.addClass（required_field）;
var parent_div = $（this）.closest（div.cloned-row1）。find（input）;
parent_div.each（function（）{
$（this）.addClass required_field）;
}）;
}
check_for_validation_removal（$（this））;
bind_validation（）;
}
请帮我处理错误。
提前感谢
这里是小提琴链接
我认为问题是，加载项字段只应在字段在附加部分中有一个值。所以我更新了 bind_validation（）并添加了一个新函数 addRemoveCloneValidation（），并删除了不相关的
函数bind_validation（）{
$（。required_field ）.each（function（）{
$（this）.rules（add，{
required：true，
}）;
}）;
addRemoveCloneValidation（）;
}
function addRemoveCloneValidation（）{
$（'div [id ^ =added]' var needsValidation = false;
$ .each（$（item）.find（'。required_field'），function（index，item）{
if（$（item）.val（））
needsValidation = true;
$（item）.change（addRemoveCloneValidation）;
}）;
$ .each（$（item）.find（'。required_field'），function index，item）{
$（item）.rules（add，{
required：needsValidation，
}）;
if（！needsValidation）
$ （item）.removeClass（'errRed'）;
}）;
}）;
}
添加新行时， bind_validation ，然后调用 addRemoveCloneValidation 。然后根据是否有任何输入值添加或删除所有克隆输入的验证。
EDIT
按照您最后的注释
2）当用户点击addmore按钮并且用户点击
的下一步按钮验证它应该说你错过了6个字段。请在填写之前填写
，因为用户没有填写克隆div中的任何强制性
字段
那么你还需要删除'Degree Date'成为强制性，或者在克隆时不设置'Degree Date'。
$ clone.find（input.deg_date）
.removeClass（'hasDatepicker'）
.removeData（'datepicker'）
.unbind（）
.datepicker {
dateFormat：mm-dd-yy，
changeMonth：true，
yearRange：-100：+0，
changeYear：true，
maxDate ：new Date（），
showButtonPanel：false，
}）; //。val（fulldate）; < - remove
EDIT 2
$ b
要手动调用表单上的验证，可以使用 $（。educationForm）。valid（）; 。 >
我已将其添加到此 小提琴 在第141行。
较少的验证仅在测试部分有效。但可以很容易地用于添加到学校部分。
- Initially when the user click next button it will show the message as You have missed 7 fields. Please fill before submitted.
- If the user clicked the add more button it will get clone without fill any of the mandatory field if user click next button. The message still shows You have missed 7 fields. Please fill before submitted
- Once the user starts fills any of the field in the cloned one and he missed the rest of the mandatory fields from clone and original div then the user click the next button it will show these many number of fields are missed.
function check_for_validation_removal(element) {
var parent_div = $(element).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input[type='text'],#txt_schName option:selected");
console.log(parent_div);
console.log(parent_div.length);
var invalid_ele = 0;
parent_div.each(function() {
if ($(this).val().trim().length == 0) {
invalid_ele = invalid_ele + 1;
}
});
console.log(invalid_ele);
if (parent_div.length == invalid_ele) {
parent_div.each(function() {
$(this).removeClass("required_field");
$(this).rules('remove');
});
bind_validation();
update_errors();
}
}
I tried adding selector in on change still no luck.
$('.cloned_field').on('input','.cloned_div',function(e){
if($(this).val().trim().length > 0)
{
$(this).addClass("required_field");
var parent_div = $(this).closest("div.cloned-row1").find("input");
parent_div.each(function () {
$(this).addClass("required_field");
});
}
check_for_validation_removal($(this));
bind_validation();
});
Please help me where I am doing wrong.
Thanks in advance
Here is the fiddle Link
What I think the question is, the add-on fields should only be validated when a field within the add-on section has a value. so I have updated the bind_validation() and added a new function addRemoveCloneValidation() and removed allot which is not in relation to the question (though you still might need it).
function bind_validation(){
$(".required_field ").each(function(){
$(this).rules("add", {
required:true,
});
});
addRemoveCloneValidation();
}
function addRemoveCloneValidation(){
$('div[id^="added"]').each(function(index, item){
var needsValidation = false;
$.each($(item).find('.required_field'), function(index, item){
if($(item).val())
needsValidation = true;
$(item).change(addRemoveCloneValidation);
});
$.each($(item).find('.required_field'), function(index, item){
$(item).rules("add", {
required:needsValidation,
});
if(!needsValidation)
$(item).removeClass('errRed');
});
});
}
when a new row is added, bind_validation is called which then calls addRemoveCloneValidation. this then adds or removes the validation for all the clone inputs based on if any of inputs has a value.
EDIT
Following your last comment
2) when the user click addmore button and user click next button for the validation it should say You have missed 6 fields. Please fill before submitted because the user has not fill any of the mandatory field from the clone div
then you also need to remove 'Degree Date' from being mandatory, or don't set the 'Degree Date' when you clone.
$clone.find("input.deg_date")
.removeClass('hasDatepicker')
.removeData('datepicker')
.unbind()
.datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
yearRange: "-100:+0",
changeYear: true,
maxDate: new Date(),
showButtonPanel: false,
});//.val(fulldate); <--remove
EDIT 2
To manually call the validation on the form, you can use $(".educationForm").valid();.
I have added it to this Fiddle on line 141.
The less validation only works on the 'test' section. but can easily to used to be added to the school section.
这篇关于使用jquery的克隆验证部分工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
