validate multiple sets of radio buttons whilst adding classes to all those missing a selection

Neil Thompson
Neil Thompson used Ask the Experts™
on
Hi all

I have a form which has multiple sets of radio buttons. Each set of radio button must have 1 option selected, how can I validate this in jQuery please? I need to be able to set a class on ALL the fieldsets missing a selection, and would also like to scroll the screen to the first missing area as well to help the user see what needs to be answered still

Thanks
Neil

example:

  <fieldset>
    <legend id="legend_ayo18">Are You Over 18 Years of Age?</legend>
    <label for="o18y">Yes</label>
    <input name="over18" id="o18y" type="radio" value="1">
    <br />
    <label for="o18n">No</label>
    <input name="over18" id="o18n" type="radio" value="0">
  </fieldset>
  
  <fieldset>
    <legend>Are you</legend>
    <input name="nationality" id="yn1" type="radio" value="1">
    <label for="yn1">A UK Citizen</label>
    <br />
    <input name="nationality" id="yn2" type="radio" value="2">
    <label for="yn2">A National of Switzerland</label>
    <br />
    <input name="nationality" id="yn3" type="radio" value="3">
    <label for="yn3">A National of the EEA</label>
    <br />
    <input name="nationality" id="yn4" type="radio" value="4">
    <label for="yn4">None of the above</label>
  </fieldset>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Developer
Distinguished Expert 2018
Commented:
I suggest looping through all the sections and checking if the section has a selected option remove the "empty_fields" class, else add the "empty_fields" class and check if the view is already scrolled to the first empty section using the flag "scrolled" if not scroll and change the flag to true:

$('#validate').on('click', function(){
	var scrolled = false;
  
  $('fieldset').each(function(){
    var fieldset = $(this);

    if( !$(':radio:checked', fieldset).length ){ //if the section has no checked radio button
      fieldset.addClass('empty_fields'); //Add class
      
      if( !scrolled ){ //if it's the first section with error then "scrolled" is false and the view will be scrolled
        scrolled = true;
        
        $('html, body').animate({
          scrollTop: fieldset.offset().top
        }, 500);
      }
    }else{ // else : the section has a checked radio button then remove the "empty_fields"
      fieldset.removeClass('empty_fields');
    }    
  });
});

Open in new window


Live working fiddle
Neil ThompsonSenior Systems Developer

Author

Commented:
wow, so easy, thanks it worked perfectly
Neil ThompsonSenior Systems Developer

Author

Commented:
just realised there are some fieldsets that are not mandatory, is there an easy way to exclude some?
JavaScript Best Practices

Save hours in development time and avoid common mistakes by learning the best practices to use for JavaScript.

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Yes sure you can, just simply use classes in the ones you want to include or exclude as you want, and use them in the selector like :

Live sample with "no-validation" class in excluded fieldsets

You're welcome, glad to help.
Neil ThompsonSenior Systems Developer

Author

Commented:
You are a legend, thanks so much :)
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Glad to help anytime brother.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial