複選框表單驗證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; 
     } 
    }); 
    }); 
}