Javascript alert pops up before selected

Question

This is kind of hard to explain, I have a multi part form in the shape of a slide show on my website. They have to choose out of 3/4 options using radio buttons.

I have put some validation on them to make sure the user selects one before being allowed to move on to the next slide.

if i click on an object to select it, i get an alert telling me to select one, which i was just trying to do. Is there anyway to select it first then check it all in one click?

$(".card1").on("click", function(){
   var notselected = 'undefined';

if($("input[id=radio"+i+"]:checked").val() == undefined){
   alert('please select an option');
} else {
   alert($("input[id=radio"+i+"]:checked").val());
   i++;
   if(animating) return false;
      animating = true;

As you can see I am asking the JQuery to alert the user if none of the options are selected, but because i want it to select/validate/animate to new slide all on one click it doesn't like it.

Is there anyway around this or idea to get around it? Thank in advance

Answer 1

If html is like that

<form action="">    
   <input id="radio1" type="radio" name="some_radio" value="radio1">
   <input id="radio2" type="radio" name="some_radio" value="radio2">
   <input id="radio3" type="radio" name="some_radio" value="radio3">
   <input id="radio4" type="radio" name="some_radio" value="radio4">
   <button class="card1" type="button">Card</button>
</form>

There is javascript code

$(".card1").on("click", function(){
   var $checked = $('input[type=radio][name=some_radio]').find(":checked");
   if(!$checked.length)
    alert('please select an option');
});

Working example on JSFiddle