2015年4月29日

jQuery:若核取方框沒被勾選,則無法提交表單(表單驗證)


這篇文章會說明如何透過jQuery來進行核取方框的表單驗證功能,如果沒有任何一個核取方框被勾選,則顯示警告,並且無法提交表單。

HTML語法撰寫

這裡我們使用jQuery:製作全選和取消全選核取方框的語法裡面所撰寫的表單,長相像這樣:


HTML語法如下:
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="CheckAll" value="核取方塊" id="CheckAll" />
      全選以下</label>
    <br />
    ------------------<br />
  </p>
  <p>
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_0" />
      機車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_1" />
      腳踏車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_2" />
      公車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_3" />
      捷運</label>
  </p>
    <input type="submit" name="button" id="button" value="送出" />
    <br />
  </p>
</form>
</body>

jQuery語法撰寫

$("#button").click(function(){
			var check=$("input[name='Checkbox[]']:checked").length;//判斷有多少個方框被勾選
			if(check==0){
				alert("您尚未勾選任何項目");
				return false;//不要提交表單
			}else{
				alert("你勾選了"+check+"個項目");
				return true;//提交表單
			}
		})
在這段語法中,當網友點擊送出(id = buttom)時
1. 我們會先判斷有多少個核取方框被勾選,寫法是input[name="表單名稱"]:checked,透過這樣的語法,我們可以選擇被勾選的核取方框,後面再加上.length,則可以判斷有多少個方框被勾選。
我們把這個值存成一個變數,叫做check。

2.如果沒有任何被勾選(check==0),則不要提交表單(return false),否則才可以提交。

參考資料

0 意見:

張貼留言