Validating radio buttons and checkboxes

Question

I am having some issues getting my code to validate my radio buttons and checkboxes. I was able to figure it out for my textarea, but I can't seem to fix my issues with the other inputs.

I am not quite sure what other steps to take, especially with these multiple choice questions. Let me know your suggestions, they will be greatly appreciated.

function validateForm() {
  var x = document.forms["quiz"]["text1"].value;
  if (x == "") {
    alert("Oops, you forgot the text!");
    return false;
  } else if (x == "yes" || x == "Yes" || x == "YES") {
    return true;
  }

}

function formSubmit() {
  document.getElementById("quiz").submit();
}

function reset() {
  document.getElementById("reset").reset();
}

function validate() {
  var a = document.getElementById("rad1").required;
  var b = document.getElementById("op1").required;
  var c = document.getElementById("rad2").required;
  if (a == false || b == false || c == false) {
    alert("Oops, you forgot something!")
  }
}

<h4>First, Let's take a small quiz! What type of Developer am I?</h4>
  <form name="quiz" id="quiz" method="post">
    <table>
      <tr>
        <td>
          <label for="ques1">Do you ever think about how you would design a web page?</label>
        </td>
        <td>
          <input type="radio" value="no" name="rad1">NO
          <input type="radio" value="yes" name="rad1">YES
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label>
        </td>
        <td>
          <input type="checkbox" name="op1"> Ease of Use
          <input type="checkbox" name="op1"> Graphics & Content
          <input type="checkbox" name="op1"> The Data Collected
          <input type="checkbox" name="op1"> N/A
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label>
        </td>
        <td>
          <input type="radio" value="no" name="rad2">NO
          <input type="radio" value="yes" name="rad2">YES
        </td>
      </tr>
      <tr>
        <td>
          <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label>
        </td>
        <td>
          <input type="text" name="text1" maxlength="3">
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))">
          <input type="reset" id="reset">
        </td>
      </tr>
    </table>
  </form>

Rather than copy/pasting what seems to be all the code, can you share a minimal working example ([MVCE](https://stackoverflow.com/help/mcve)) that demonstrates the issue? — stealththeninja, Nov 06 '18 at 05:43
Following on, can you explain what the expected outcome is? What does correct validation look like in this case? — stealththeninja, Nov 06 '18 at 05:44
one mistake in your code i can point out is that you are trying get the element by id document.getElementById("rad1").required; but "rad1" is not a id but a name attribute of the radio button and take look at this answer it may help you. https://stackoverflow.com/a/1423783/6832201 — Ropali Munshi, Nov 06 '18 at 05:56
This isn't all the code, I pasted what I thought was needed, the form and the script. Also, this code needs to validate the data to make sure it is entered. I also want it to display an alert to the user when the data has not been entered but is being submitted . — Lily V., Nov 06 '18 at 15:58

score 0 · Answer 1 · answered Nov 06 '18 at 06:33

Please check below modified HTML. I've Re modified with your expected validation. Go through the code to have an idea

<!DOCTYPE html>
<html>
<head>
    <script>
        function validateForm() {
          debugger;
           if(!validate())
             {
               
                  var x = document.forms["quiz"]["text1"].value;
                  if (x == "") {
                      alert("Oops, you forgot the text!");
                      return false;
                  }
                  else if (x == "yes" || x == "Yes" || x== "YES") {
                      alert("Alright");

                      return true;
                  }
             }

        }

        function formSubmit()
            {
                document.getElementById("quiz").submit();
            }
        function reset()
            {
                document.getElementById("reset").reset();
            }
        function validate()
            { 
              debugger;
                var a1 = document.getElementById("rad1").checked;
                var a2 = document.getElementById("rad2").checked;
                var a3 = document.getElementById("rad3").checked;
                var a4 = document.getElementById("rad4").checked;
              
                 var b1 = document.getElementById("op1").checked;
                 var b2 = document.getElementById("op2").checked;

                 var b3 = document.getElementById("op3").checked;

                var b4 = document.getElementById("op4").checked;

              if ((a1 == false &&  a2 == false) || (a3 == false &&  a4 == false) || (b1 == false && b2 == false && b3 == false && b4 == false))
                    {
                        alert("Oops, you forgot first three questions!")
                        return false;
                    }
               
            }
    </script>
</head>

<body>
    <h4>First, Let's take a small quiz! What type of Developer am I?</h4>
        <form name="quiz" id="quiz" method="post">
            <table>
                <tr>
                    <td>
                        <label for="ques1">Do you ever think about how you would design a web page?</label>
                    </td>
                    <td>
                        <input type="radio" value="no" id="rad1">NO
                        <input type="radio" value="yes" id="rad2">YES
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques2">If yes, which of these are your main priorities when thinking of the design? If no, please check N/A</label>
                    </td>
                    <td>
                        <input type="checkbox" id="op1"> Ease of Use
                        <input type="checkbox" id="op2"> Graphics & Content
                        <input type="checkbox" id="op3"> The Data Collected
                        <input type="checkbox" id="op4"> N/A           
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques3">Do you enjoy conducting research, asking questions, and building reports?</label>
                    </td>
                    <td>
                        <input type="radio" value="no" id="rad3">NO
                        <input type="radio" value="yes" id="rad4">YES
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="ques4">Does hacking a system or stopping a system from being hacked sound interesting to you? Type Yes or No:</label>
                    </td>
                    <td>
                        <input type="text" name="text1" maxlength="3"> 
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Finished!" id="submit" onclick="return validateForm(document.getElementById('quiz'))">
                        <input type="reset" id="reset">
                    </td>
                </tr>
            </table>
        </form>
</body>
</html>

I tried using this method to no avail, thank you for the suggestion though. One user pointed out that I should use id instead of name, so that maybe the issue — Lily V., Nov 06 '18 at 16:00

Validating radio buttons and checkboxes

1 Answers1