CODEWITHSUNDEEP
javascriptjquery
Vincent
Vincent

Reputation: 852

custom validity at least one checkbox is selected jquery

I have two checkboxes for gender . male and female. how will i set my validation for at least one gender should be selected. I also have 1 week set of days, from monday to sunday. it is also at least one selection of days. here is my 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

Upvotes: 0

Views: 909

Answers (3)

manuel
manuel

Reputation: 17

You can use :checked in jquery look this example Jquery API documentation :checked

var n = $( "input:checked" ).length; with this you can check to know the number of inputs you want you would have to apply inputs according to the case you are validating, using a class selector in jquery.

Upvotes: 1

webkit
webkit

Reputation: 3369

Instead of using the html5 required and validity.. You can just use jquery to see if a checkbox is checked..

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);

Upvotes: 1

Mathijs Segers
Mathijs Segers

Reputation: 6238

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

}

This should do the trick, not sure if it likes the [] in the name though.

Basicly tells jquery to fetch all the input's with the gender[] name who have been selected. All you have to do is check the length.

Upvotes: 1

Related Questions