Javascript 在一个表单中对每个容器内的重复字段进行自定义jQuery验证

Javascript 在一个表单中对每个容器内的重复字段进行自定义jQuery验证,javascript,html,jquery,Javascript,Html,Jquery,我试图检查特定输入字段是否有重复的值,这些值在每个包含元素中重复 只有当该字段与其他比较字段具有相同的值并且共享相同的父容器时,才应将其视为“重复”,这意味着该字段可以在2个或更多不同的容器中具有相同的值。现在听起来有点混乱,但我将添加标记和当前的jQuery代码,希望它会更清晰 var attendes_group=$('.attendee accordion group'), inputs=attenders\u group.find('input[name*=“\u attendeema

我试图检查特定输入字段是否有重复的值,这些值在每个包含元素中重复

只有当该字段与其他比较字段具有相同的值并且共享相同的父容器时,才应将其视为“重复”,这意味着该字段可以在2个或更多不同的容器中具有相同的值。现在听起来有点混乱,但我将添加标记和当前的jQuery代码,希望它会更清晰

var attendes_group=$('.attendee accordion group'),
inputs=attenders\u group.find('input[name*=“\u attendeemail”]”);
输入。更改(功能(e){
//创建输入值数组
var ar=inputs.map(函数(){
如果($(this.val()!='')返回$(this.val())
}).get();
//如果存在重复项,则创建重复项数组
var unique=ar.filter(功能(项目、位置){
返回ar.indexOf(项目)!=pos;
});
console.log(唯一的.length);
//如果重复
if(unique.length!=0){
//做点什么
}
});
正文{
保证金:0;
填充:0;
字体系列:Arial、Helvetica、无衬线字体;
字号:14px
}
h3{
显示:块;
利润率:0.15px0;
字号:18px;
}
h4{
填充:0;
利润率:0.15px0;
字体大小:15px;
}
形式{
填充:20px;
}
.出席者手风琴组{
填充:40px;
边框:1px实心#999;
边缘底部:20px;
}
输入{
边框:1px实心#ccc;
宽度:50%;
线高:1;
高度:20px;
}
.按钮{
显示:内联块;
背景#0274be;
颜色:#fff;
填充:10px 30px;
文字装饰:无;
边界:无;
光标:指针;
边缘底部:20px;
}

活动标题1
与会者1

名称

电子邮件

与会者2 名称

电子邮件

与会者3 名称

电子邮件

活动名称2 与会者1 名称

电子邮件

与会者2 名称

电子邮件

下一个
如果我理解正确,您希望捕获示例中每个“组”或每个“事件”中相同输入值的重复项

这就是我所做的。它将需要更多的调整,比如只为每个重复值输出一条错误消息,而不是两条。在链接的JSFIDLE示例中,验证仅在加载时进行,而不是在按下“下一步”按钮时进行。但这会把你推到正确的位置

我在代码中添加了注释,以帮助您理解正在进行的操作

jsFiddle:

//将保存所有重复的错误消息
var errorMessage='';
//循环通过每个“组”
$('.attendee手风琴组')。每个(函数(){
//将保存每个“组”的所有输入值和名称
var输入=[];
//循环当前组的所有输入
$(this).find('input').each(function(){
//保存当前组的每个输入的值和名称
var输入={'name':$(this.attr('name'),'value':$(this.val()};
//将当前输入/名称保存到此当前组的不断增加的输入列表中
输入。推送(输入);
});
//在上一个循环中为此组生成的输入列表中循环
对于(变量i=0;i\n';
}
}
});
//最后输出错误消息
$('div.error')[0].innerHTML+=errorMessage;

你可以发布一些应该允许和不允许的示例吗?@JM-AGMS当然,在每个
与会者手风琴组中都有与会者,所以组内的每个与会者都需要有一个唯一的电子邮件字段值,所以组内不允许重复的电子邮件字段,就是这样。测试,只要稍加修改,它就能工作了!再次感谢,答案已被接受。
// will hold all the duplicate error message
var errorMessage = '';
// loops through each "group"
$('.attendee-accordion-group').each(function() {
  // will hold all input values and names of each "group"
  var inputs = [];
  // loops through all inputs of the current group
  $(this).find('input').each(function() {
    // saves the value and name of each input for the current group
    var input = {'name':$(this).attr('name'), 'value':$(this).val()};
    // saves the current input/name into a growing list of inputs for this current group
    inputs.push(input);
  });
  // loops through the inputs list generated in the previous loop for this group
  for (var i = 0; i < inputs.length; i++) {
    // shortens the reference to the current input
    var input = inputs[i];
    // returns the input that is duplicated
    //   1. Loops though the inputs list
    //   2. If the current index of the current input does not match the index of the item being looked up; in other words this will ignore itself, since matching with itself is technically a match
    //   3. If the current input value matches with the looked up input
    //   4. "&& item.value" makes sure that an input value exists, since empty values technically match with other empty values
    var conflict = inputs.find(function(item) {return inputs.indexOf(item) !== i && item.value === input.value && item.value;});
    // if conflict is not undefined; would be undefined if no duplicates were found
    if (conflict) {
      // append this error message to a growing error message
      errorMessage += 'Value of form name ' + input.name + ' already exists on form name ' + conflict.name + '.<br>\n';
    }
  }
});
// finally output the error message
$('div.error')[0].innerHTML += errorMessage;