2014-06-23 116 views
0

我有两个性别复选框。男性和女性。我应该如何为至少一个性别设置我的验证。从星期一到星期日,我还有一周的时间。这也是至少有一天的选择。这里是我的jQuery自定义有效性至少选中一个复选框jquery

$(document).ready(function(){ 
      // --- set required message --- // 

       var msg=""; 
       var elements = document.getElementsByTagName("INPUT"); 

       for (var i = 0; i < elements.length; i++) { 
        elements[i].oninvalid =function(e) { 
         if (!e.target.validity.valid) { 
         switch(e.target.name){        
          case 'gender' : 
           e.target.setCustomValidity("Please select at least one gender.");break;        
          case 'days' : 
           e.target.setCustomValidity("Please select at least one day.");break; 
          case 'location' : 
           e.target.setCustomValidity("Please enter a location where the image can be seen.");break; 
         default : e.target.setCustomValidity("");break; 

         } 
         } 
        }; 
        elements[i].oninput = function(e) { 
         e.target.setCustomValidity(msg); 
        }; 
       } 
      }); 



<input type=checkbox name=gender[] required>Male 
<input type=checkbox name=gender[] required>Female 

<input type=checkbox name=days[] required>Monday 
<input type=checkbox name=days[] required>Tuesday 
<input type=checkbox name=days[] required>Wednesday 
<input type=checkbox name=days[] required>Thursday 
<input type=checkbox name=days[] required>Friday 
<input type=checkbox name=days[] required>Saturday 
<input type=checkbox name=days[] required>Sunday 
+0

性别不是一个广播组更可能,虽然现在adays谁知道..;] – webkit

+0

@webkit是的,我知道。但在我的网络上。有一个选择,男性只能看到和女性。或者可以是两者。所以我做了一个复选框,以便可以选择性别。与哪天可以查看的日期相同 – Vincent

回答

1

而不是使用所需的HTML5和有效性。您可以只使用jQuery来看看一个复选框被选中..

if($("input[name='gender[]']").is(":checked").length < 1){ 
// no gender selected.. 
var errmsg = $("<div class='error'>Please select at least one gender</div>"); 

} 
if($("input[name='days[]']").is(":checked").length < 1){ 
// no day selected.. 
var errmsg = $("<div class='error'>Please select at least one day</div>"); 
} 

$("containerelement").append(errmsg); 
+0

我是否仍然可以从html5中为此设置消息? – Vincent

+1

当然,只要使用普通的错误文本,并将其插入到你想要的元素。 – webkit

+0

好的,我会试试这个。 – Vincent

1
if($("input[name='gender[]']:checked").length > 0){ 

} 

这应该做的伎俩,不知道这是否喜欢[]的名称虽然。

基本上告诉jquery获取所有的输入与已选择的性别[]名称。你所要做的就是检查长度。

1

您可以在jQuery中使用:checked看看这个例子Jquery API documentation :checked

var n = $("input:checked").length;有了这个,你可以检查知道你想要输入的数量,你将不得不根据你正在验证的情况下使用输入,在jquery中使用类选择器。

相关问题