Friday, 15 August 2014

jquery - Making sure at least 1 of 40+ radio buttons is checked -



jquery - Making sure at least 1 of 40+ radio buttons is checked -

i'm using jquery.validate form form validation. problem there 40 radio inputs on form, s1_am, s1_pm, s2_am, s2_pm, each 10ish radio inputs apiece. @ to the lowest degree 1 of 4 options has checked, not four. if set class="required" in code, not correct, since makes 4 options required. how around this?

ideally id maintain validation way is, add together alert if radio empty.

the jquery

jquery.validator.messages.required = ""; $("#enroll").validate({ invalidhandler: function(e, validator) { var errors = validator.numberofinvalids(); if (errors) { var message = errors == 1 ? 'you missed 1 required field' : 'you missed ' + errors + ' required fields'; $("div.error span").html(message); $("div.error").show(); } else { $("div.error").hide(); } } });

the radios dynamic btw:

if($row['s1_am_fill'] < $row['s1_am_cap']) { $s1_am .= '<input type="radio" name="s1_am" id="s1_am_'.$id.'" value="'.$id.'" />; }

plus 3 more, s1_pm, s2_am , s2_pm.

here's did, except 1 time alert starts, doesn't stop

$('#submit').click(function () {$("ul.courses").each(function(){ $(this).find("input[type=radio]").each(function(){ alert("you must select @ to the lowest degree 1 available course"); }); homecoming false; });

you should not utilize additional submit or click handler functions have potential interfere plugin's built-in event handlers.

you create new rule using plugin's built-in addmethod() method. this...

jquery.validator.addmethod('customrule', function() { homecoming ($("input[name='s1_am']:checked").val() || $("input[name='s1_pm']:checked").val() || $("input[name='s2_am']:checked").val() || $("input[name='s2_pm']:checked").val()); }, 'please select @ to the lowest degree 1 group' );

the new rule checks see if @ to the lowest degree 1 of 4 radio groups used. rule applied follows...

$(document).ready(function() { $('#enroll').validate({ // initialize plugin rules: { 's1_am': { customrule: true }, 's1_pm': { customrule: true }, 's2_am': { customrule: true }, 's2_pm': { customrule: true } }, groups: { // utilize alternative consolidate 4 messages 1 groupname: "s1_am s1_pm s2_am s2_pm" } }); });

working demo: http://jsfiddle.net/93jtz/

you'll need adjust error placement functions per own project's specifications.

other options: http://docs.jquery.com/plugins/validation/validate#toptions

jquery jquery-validate

No comments:

Post a Comment