Issue while checking radio buttons

Question

I am trying to show a red circle with the "!" when the radio buttons are unchecked and to show a green circle when both are checked. After that I use a function to make the button submit or not according to the red/green circle.

I've tried many ways to tangle with the code but it doesn't want to show the green circle when it's checked any idea why ?

PS:

span3 (red circle )

span2 (green circle)

Basically I want to make my form validation by js not by php ...

HTML:

<label id="labelage">Age:</label>
<br>
<input type="radio" id="under_13" value="under_13" name="age">
<label for="under_13" class="light">Under 13</label>
<input type="radio" id="over_13" value="over_13" name="age">
<label for="over_13" class="light">13 or Older</label>
<div class="break"></div>

<div id="borderlabel">

  <label id="labelage1">Gender:</label>
  <input type="radio" id="male" value="male" name="gender">
  <label for="male" class="light1">Male</label>

  <input type="radio" id="female" value="female" name="gender">
  <label for="female" class="light1">Female</label>

</div>
....
<button type="submit" id="signupb" name="register">Sign up
  <div class="span3">!</div>
  <div class="span2">✔</div>
</button>

JavaScript

$(".span1").hide();
$(".span2").hide();
$(".span3").hide();


function submit() {
  if (!$('#male').is(':checked') || !$('#female').is(':checked')) {
    $(".span3").show();
  } else {
    if (!$('#under_13').is(':checked') || !$('#over_13').is(':checked')) {
      $(".span3").show();
    } else {
      $(".span2").show();
    }
  }
}

$("#signupb").on("mouseover", submit);

Answer 1

1. Your logic is off
2. Have the radio clicks also update the !
3. Do not call something submit
4. Cancel the submission if clicking anyway

Try this:

 function checkRad() { var ok = ($('#male').is(':checked') || $('#female').is(':checked')) && ($('#under_13').is(':checked') || $('#over_13').is(':checked')) $(".span3").toggle(!ok); $(".span2").toggle(ok); return ok; } $(function() { $(".span1").hide(); $(".span2").hide(); $(".span3").hide(); $("#signupb").on("mouseover", checkRad) .on("click", function(e) { if (!checkRad()) e.preventDefault(); }) $("input[type=radio]").on("click", function() { checkRad(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label id="labelage">Age:</label> <br> <input type="radio" id="under_13" value="under_13" name="age"> <label for="under_13" class="light">Under 13</label> <input type="radio" id="over_13" value="over_13" name="age"> <label for="over_13" class="light">13 or Older</label> <div class="break"></div> <div id="borderlabel"> <label id="labelage1">Gender:</label> <input type="radio" id="male" value="male" name="gender"> <label for="male" class="light1">Male</label> <input type="radio" id="female" value="female" name="gender"> <label for="female" class="light1">Female</label> </div> .... <button type="submit" id="signupb" name="register">Sign up <div class="span3">!</div> <div class="span2">✔</div> </button> 

Answer 2

• I would recommend using jQuery Validation plugin instead
• It's bad practice to assign IDs to every input element, makes code harder to maintain. Consider accessing elements by name attribute.
• Consider adding server-side validation as well against browser errors/malicious users.

---

Change your submit() function to:

function validateForm() {
    $(".span2").hide();
    $(".span3").hide();

    var isError = false;
    if (!$('#male').is(':checked') && !$('#female').is(':checked')) {
        isError = true
    } else if (!$('#under_13').is(':checked') && !$('#over_13').is(':checked')) {
        isError = true;
    }

    if(isError){
        $(".span3").show();
    } else {
        $(".span2").show();
    }
}

$("#signupb").on("mouseover", validateForm);

DEMO