javascript - custom validity at least one checkbox is selected jquery -
i have 2 checkboxes gender . male , female. how set validation @ to the lowest degree 1 gender should selected. have 1 week set of days, mon sunday. @ to the lowest degree 1 selection of days. here jquery
$(document).ready(function(){ // --- set required message --- // var msg=""; var elements = document.getelementsbytagname("input"); (var = 0; < elements.length; i++) { elements[i].oninvalid =function(e) { if (!e.target.validity.valid) { switch(e.target.name){ case 'gender' : e.target.setcustomvalidity("please select @ to the lowest degree 1 gender.");break; case 'days' : e.target.setcustomvalidity("please select @ to the lowest degree 1 day.");break; case 'location' : e.target.setcustomvalidity("please come in location image can 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
instead of using html5 required , validity.. can utilize jquery see if checkbox checked..
if($("input[name='gender[]']").is(":checked").length < 1){ // no gender selected.. var errmsg = $("<div class='error'>please select @ to the lowest degree 1 gender</div>"); } if($("input[name='days[]']").is(":checked").length < 1){ // no day selected.. var errmsg = $("<div class='error'>please select @ to the lowest degree 1 day</div>"); } $("containerelement").append(errmsg); javascript jquery
No comments:
Post a Comment