验证形式使用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

回答

相关问题