驗證形式使用Javascript

複選框我有一組複選框的形式如下：驗證形式使用Javascript

<form name="form1" onsubmit="return window.Validate()" method="post" action="myprog.cgi"> 
    <div id="filters"> 
     <input name="One_f" type="checkbox"> No. 1<br> 
     <input name="Two_f" type="checkbox"> No. 2<br> 
     <input name="Three_f" type="checkbox"> No. 3<br> 
    </div> 
    <div id="Colors"> 
     <input name="Red" type="checkbox"> Red<br> 
     <input name="Blue" type="checkbox"> Blue<br> 
     <input name="Green" type="checkbox"> Green<br> 
    </div> 
    <div id="Button"> 
     <input name="Submit" value="Submit" type="submit"> 
    </div> 
</form>

我想使用JavaScript編寫一個函數Validate將看看是否有在div ID複選框的 filters被選中。如果沒有選中它們，它應該顯示一個警告框並阻止執行的cgi。如果有幫助，div filters中的複選框的名稱都以_f結尾。如何編寫這樣的功能？

來源

2012-06-02 user828647

是jQuery的一個選擇嗎？會讓它更容易。 – ThiefMaster

我對jQuery一無所知......我更喜歡它是純Javascript，如果可能的話。 – user828647

那麼，這將大大減少必要的代碼，並使其更具可讀性...... – ThiefMaster

這是jQuery解決方案，我會在一會兒添加一個普通的JS。

$('form[name="form1"]').on('submit', function(e) { 
    if(!$('#filters input:checkbox:checked').length) { 
     e.preventDefault(); 
     alert('Please select at least one filter.'); 
    } 
});

這個代碼不不要求onsubmit內事件。

既然你不熟悉的jQuery，我會更徹底地解釋：

$('form[name="form1"]')創建包含選擇匹配的所有元素的jQuery對象。如果你給你的表格id="form1"並使用$('#form1')
.on()綁定事件處理程序會更快。傳遞給回調函數的第一個參數是一個包裝事件對象，如果需要，我們需要阻止提交表單。
$('#filters input:checkbox:checked')選擇所有選中的複選框，它們是#filters的子項。 :checkbox和:checked是僞選擇將只匹配當前選中的複選框）
.length是jQuery對象中元素的數量 - 如果不檢查的話是零
e.preventDefault();阻止事件的默認操作被被執行，即表格不會被提交。

一般你會在整個包住代碼$(document).ready(function() { ... });，使其儘快執行的DOM準備 - 如果你把包含代碼的<script>標籤的形式</form>標籤之後，它沒有必要，但。

如果你真的想要一個簡單的JS解決方案，試試這個：

function Validate() { 
    var container = document.getElementById('filters'); 
    var checked = 0; 
    for(var i = 0; i < container.childNodes.length; i++) { 
     var elem = container.childNodes[i]; 
     if(elem.tagName == 'INPUT' && elem.type == 'checkbox' && elem.checked) { 
      checked++; 
     } 
    }; 
    if(checked) { 
     return true; 
    } 
    alert('Please select at least one filter.'); 
    return false; 
}

來源

2012-06-02 11:23:57 ThiefMaster

+1爲我提供了兩種解決方案......我會盡力找出jQuery之一。 – user828647

驗證形式使用Javascript

回答

相關問題