How to validate radio button

I have four radio buttons grouped togather as 'vehicle' what I want to do is when a user clicks on submit, I want my JQuery to check if the user has atleast chosen one of the radio buttons if not, I want them to get an alert message .

I have tried the following code which did not work, as it is always returning false;

Any help would be highly appriciated.
jQuery('input[@name="radio"]').each(function()
{
   if( ! $('input:radio:selected', this).length > 0)
   {
	nextMove  = false;
   }
});
if(!nextMove )
  alert('Please choose a vehicle');

Open in new window

aniga42Asked:
Who is Participating?
 
twocandlesConnect With a Mentor Commented:
Yes, that's the idea.

You can rewrite it like this:

nextMove  = false;
jQuery('input[@name="radio"]').each(function()
{
   // You can remove the second condition because on true you'll exit
   // the loop
   if(($('input:radio:selected', this).length > 0))
   {
        nextMove  = true;
        // You don't need to check for more radios
        return;
   }
});
if(!nextMove )
  alert('Please choose a vehicle');

Open in new window

0
 
twocandlesCommented:
Since you cannot select more than 1 radio button, that function always returns false because there will be always one radio not selected.

Change the logic a bit: if any of the radios is selected, then return true and exit the function, so the next radio (unselected) won't toggle the flag to false.
0
 
aniga42Author Commented:
Thanks for such a quick response, do you mind showing me how that code would work? I tried you suggestion (though I am not sure my syntax was correct) still returned false.
Again thanks for your help
0
 
twocandlesCommented:
Sure, could you post more code? I would need the full script and how the form and radio buttons are defined.
0
 
nplibConnect With a Mentor Commented:
don't know jQuery but this kinda logic states, nextMove is already false, so if the "if statement" returns true then nextMove becomes true amd can't be changed back to false
nextMove  = false;
jQuery('input[@name="radio"]').each(function()
{
   if(($('input:radio:selected', this).length > 0) && (nextMove == false))
   {
        nextMove  = true;
   }
});
if(!nextMove )
  alert('Please choose a vehicle');

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.