2011-07-03 333 views
0

我需要驗證表單。我正在使用jQuery驗證插件,但我似乎無法得到這個工作。jQuery驗證插件複選框驗證

<form id="form1" name="form1" action=<?=$_SERVER['PHP_SELF'];?> method="POST"> 
<div> 
     <h3>Cardio-Pulmonary System</h3> 
     <div style="border: medium none;display: inline;padding: 0;text-align:left"> 
     <h4>1. Do you have, or have you had, or do you take medications for?</h4> 
     <label><input class="checkbox" type="checkbox" value="none" name="q1[]" />no/or none of the below</label> 
     <p><input class="checkbox" type="checkbox" value="q1-1" name="q1[]" />heart disease (please specify) 
     <input class="checkbox" type="text" id="text" name="q1-1" value="" /></p> 
     <p><input class="checkbox" type="checkbox" value="high blood pressure" name="q1[]" />high blood pressure</p> 
     <p><input class="checkbox" type="checkbox" value="high cholesterol" name="q1[]" />high cholesterol</p> 
     <p><input class="checkbox" type="checkbox" value="diabetes" name="q1[]" />diabetes</p> 
     <p><input class="checkbox" type="checkbox" value="q1-2" name="q1[]" />lung disorder (eg asthma, emphysema) 
     <input class="checkbox" type="text" id="text" name="q1-2" value="" /></p> 
     <p><input class="checkbox" type="checkbox" value="other cardiac problem" name="q1[]" />other cardiac problem (include pacemaker)</p> 

     <h4>2. Do you have a family history of?</h4> 
     <p><input type="checkbox" value="none" name="q2[]" />no/or none of the below</p> 
     <p><input type="checkbox" value="heart murmur" name="q2[]" />heart murmur</p> 
     <p><input type="checkbox" value="valve defect" name="q2[]" />valve defect</p> 
     <p><input type="checkbox" value="racing heart" name="q2[]" />racing heart</p> 
     <p><input type="checkbox" value="irregular beats" name="q2[]" />irregular beats</p> 
     <p><input type="checkbox" value="angina" name="q2[]" />angina</p> 
     <p>other<br/><input type="text" id="text" value="" name="q2[]" /></p> 

     <h4>3. Have you ever been told that you have heart problems? Eg</h4> 
     <p><input type="checkbox" value="none" name="q3[]" />no/or none of the below</p> 
     <p><input type="checkbox" value="heart disease" name="q3[]" />heart disease</p> 
     <p><input type="checkbox" value="high blood pressure" name="q3[]" />high blood pressure</p> 
     <p><input type="checkbox" value="high cholesterol" name="q3[]" />high cholesterol</p> 
     <p><input type="checkbox" value="diabetes" name="q3[]" />diabetes</p> 
     <p><input type="checkbox" value="stroke" name="q3[]" />stroke</p> 

     <h4>4. Do you have, or have you experienced?</h4> 
     <p><input type="checkbox" value="none" name="q4[]" />no/or none of the below</p> 
     <p><input type="checkbox" value="epilepsy" name="q4[]" />epilepsy</p> 
     <p><input type="checkbox" value="fainting" name="q4[]" />fainting</p> 
     <p><input type="checkbox" value="seizures" name="q4[]" />seizures</p> 
     <p><input type="checkbox" value="dizzy spells" name="q4[]" />dizzy spells</p> 
     <p><input type="checkbox" value="convulsions" name="q4[]" />convulsions</p> 

     <h4>5. Have you ever smoked cigarettes?</h4> 
     <p><input type="checkbox" value="q5-1" name="q5[]" />Yes, still do approx <input type="text" name="q5-1" style="width:20px" maxlength="3" /> a day</p> 
     <p><input type="checkbox" value="q5-2" name="q5[]" />Yes, but stopped <input type="text" name="q5-2" style="width:20px" maxlength="3" /> months/<input type="text" name="q5-3" style="width:20px" maxlength="3" /> years ago. </p> 
     <p><input type="checkbox" value="never" name="q5[]" />Never</p> 
    </div> 
    </form> 

你如何驗證複選框,這樣,他們需要至少選擇一個對每個問題?

這是我的形式... HTTP://test9.favstay.com/form.php

+0

另外,我不知道爲什麼只有一個錯誤消息彈出應該是每個輸入框驗證... –

+0

Jae,我還建議您使用CSS文件來放置您的格式。添加ID(或類的)到你的表單複選框也有助於驗證 – Brad

回答

0

您可以使用jQuery驗證插件來驗證HTML表單,並驗證該複選框,您可以添加「自定義選擇器「添加到驗證選項。退房的例子here

1

使用的最小和最大長度

<input type="checkbox" value="palin" name="upd" id="upd"/> 
</p> 
<p> 
<label for="fox">Fox</label> 
<input type="checkbox" value="fox" name="upd" id="upd" /> 
</p> 
<p> 
<label for="left">Left</label> 
<input type="checkbox" value="left" name="upd" id="upd" /> 
</p> 

驗證

$("#upd").rules("add", { 
     required: true, 
     minlength: 1, 
     maxlength: 1, 
    messages: { 
     required: "Please pick a category", 
     minlength: jQuery.format("Please, Check at least one box"), 
     maxlength: jQuery.format("Please, You checked too many boxes"), 
    } 
}); 

添加一個ID爲每個複選框(Q4,Q5等),用您的Q3,Q4等在那裏我有#upd。只要適應您的需求。

+1

-1 - 在頁面上不能有多個元素具有相同的ID – timbrown