复选框表单验证jQuery

Question

我有一个表单，用户可以选择一个事件列表，每个事件的开始时间都是一个类名。提交表单时，我需要检查用户是否选择了具有相同启动时间的多个事件。

例如在今天如果用户选择了事件A和事件C，它会触发验证消息。

<form> 

<h3>Today</h3> 

    <input type="checkbox" name="date" class="starttime-1730" value="A" />Event A 
    <input type="checkbox" name="date" class="starttime-1600" value="B" />Event B 
    <input type="checkbox" name="date" class="starttime-1730" value="C" />Event C 
    <input type="checkbox" name="date" class="starttime-1630" value="D" />Event D 


<h3>Tomorrow</h3> 

    <input type="checkbox" name="date" class="starttime-1830" value="A" />Event A 
    <input type="checkbox" name="date" class="starttime-1830" value="B" />Event B 
    <input type="checkbox" name="date" class="starttime-1930" value="C" />Event C 
    <input type="checkbox" name="date" class="starttime-2030" value="D" />Event D 

<input type="submit" name="submit" /> 

</form> 

Answer 1

首先，将启动时间放在数据属性中，而不是类（这不是类的用途）。例如：

<input type="checkbox" name="date" data-starttime="1730" value="A" />Event A 

下一页放两天一个字段里面，这样你就可以用相同的功能检查他们：

<form id="form1"> 
<fieldset> 
<caption>Today</caption> 

    <input type="checkbox" name="date" data-starttime="1730" value="A" />Event A 
    <input type="checkbox" name="date" data-starttime="1600" value="B" />Event B 
    <input type="checkbox" name="date" data-starttime="1730" value="C" />Event C 
    <input type="checkbox" name="date" data-starttime="1630" value="D" />Event D 
</fieldset> 
<fieldset> 
<caption>Tomorrow</caption> 

    <input type="checkbox" name="date" data-starttime="1830" value="A" />Event A 
    <input type="checkbox" name="date" data-starttime="1830" value="B" />Event B 
    <input type="checkbox" name="date" data-starttime="1930" value="C" />Event C 
    <input type="checkbox" name="date" data-starttime="2030" value="D" />Event D 
</fieldset> 
<input type="submit" name="submit" /> 
</form> 

这里是做匹配的jQuery函数。它没有经过测试。

function submit(){ 
    $("#form1 fieldset").each(function(i){ 
    var hashmap = {}; 
    $("input:checked", $(i)).each(function(j){ 
     var mytime = $(j).data("starttime"); 
     if(hashmap[mytime] != undefined){ 
     //Collision, report it or something 
     }else{ 
     hashmap[mytime] = 1; 
     } 
    }); 
    }); 
}