Error validation for a radio button in HTML

Question

I'm going through the process of validating my HTML using W3 validator when it checks through my pages I get a validation error:

The label element may contain at most one button, input, keygen, meter, output, progress, select, or textarea descendant. From line 136, column 33; to line 136, column 76 2 Ratin

I'm not entirely sure what is wrong because as far as I can tell I have only used one input type in the label.

Here is my Code for that segment:

<label> Rating
  <br>

  <input type="radio" name="rating" value="1"> 1
  <br>
  <input type="radio" name="rating" value="2"> 2
  <br>
  <input type="radio" name="rating" value="3"> 3
  <br>
  <input type="radio" name="rating" value="4"> 4
  <br>
  <input type="radio" name="rating" value="5"> 5
  <br>
  <input type="radio" name="rating" value="6"> 6
  <br>
  <input type="radio" name="rating" value="7"> 7
  <br>
  <input type="radio" name="rating" value="8"> 8
  <br>
  <input type="radio" name="rating" value="9"> 9
  <br>
  <input type="radio" name="rating" value="10"> 10
  <br>

</label>

The webpage does work either way, i would just like to fix the validation if possible.

Here is the code for my entire page if it is needed:

<!doctype html>
<html>

  <head>

    <meta charset="utf-8">
    <title>Contact</title>

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Slideshow.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">

    <div class="container">

      <div class="row">

        <div class="col-md-12">

          <h1> Nathan Rivera </h1>

          <h1> Portfolio </h1>

        </div>

      </div>

    </div>


    <script>
      function checkforblank() {

        if (document.getElementById('name').value == "") {
          alert("Entry can't be empty");
          document.getElementById('name').style.borderColor = "red";
          return false;
        }

        if (document.getElementById('email').value == "") {
          alert("Entry can't be empty");
          document.getElementById('email').style.borderColor = "red";
          return false;
        }




        var radios = document.getElementsByName("rating");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
          if (radios[i].checked) formValid = true; {
            i++;
          }
        }

        if (!formValid) {
          alert("Please Pick Rating");
          return formValid;
          document.getElementsByName("rating").style.borderColor = "red";
        }

      }

    </script>


  </head>

  <body>

    <div class="container">

      <div class="row" id="inner">

        <div class="col-lg-12 center">

          <ul class="nav nav-pills">

            <li><a href="index.html">Homepage</a></li>

            <li><a href="Portfolio.html">Portfolio</a></li>

            <li><a href="Projects.html">Projects</a></li>

            <li><a href="Contact.html">Contact</a></li>

            <li class="active"><a href="Survey.html">Survey</a></li>

          </ul>

        </div>

      </div>

      <div class="row">

        <div class="col-md-12">

          <form method="post" action "#" onSubmit="return checkforblank()">

            <fieldset>

              <label> Name:
                <br>

                <input type="text" id="name" name="name">

              </label>

              <br>
              <br>

              <label> Email:
                <br>

                <input type="text" id="email" name="email">

              </label>


              <br>
              <br>

              <label> Rating
                <br>

                <input type="radio" name="rating" value="1"> 1
                <br>
                <input type="radio" name="rating" value="2"> 2
                <br>
                <input type="radio" name="rating" value="3"> 3
                <br>
                <input type="radio" name="rating" value="4"> 4
                <br>
                <input type="radio" name="rating" value="5"> 5
                <br>
                <input type="radio" name="rating" value="6"> 6
                <br>
                <input type="radio" name="rating" value="7"> 7
                <br>
                <input type="radio" name="rating" value="8"> 8
                <br>
                <input type="radio" name="rating" value="9"> 9
                <br>
                <input type="radio" name="rating" value="10"> 10
                <br>

              </label>

              <br>
              <br>

              <div class="form-group">

                <label for="comments">Comments:</label>
                <textarea class="form-control" rows="5" id="comments"></textarea>

              </div>

            </fieldset>

          </form>

          <form action="javascript:alert('Thank You For Your Input')" method="get" onSubmit="return checkforblank()">

            <input type="submit" value="Submit">

          </form>

        </div>

      </div>

    </div>

    </div>


    <script src="Bootstrap/js/bootstrap.js"></script>
    <script src="Jquery/jquery-1.12.3.js"></script>
  </body>

</html>

Quick question.... Why are you using JS for this when you can do it way easier with jQuery? — perkes456, Jun 19 '16 at 20:09
Because I havent figured out how to use jquerry yet. JavaScript in general is really confusing for me. — nathan rivera, Jun 19 '16 at 20:13
Include a jQuery file into your project and you can get element like this for instance: if($('email').val()=="")... This way you can write much more cleaner and efficient code... :) — perkes456, Jun 19 '16 at 20:17
Thank you for the tip. I just learned how to use bootstrap as well. — nathan rivera, Jun 19 '16 at 20:20

score 1 · Accepted Answer · answered Jun 19 '16 at 20:30

There are too many errors in your code.

First, you have <div> and <h1> elements in <head>. You can't do that.

Then there are <br> tags in your <label>, this is also not allowed.

Then in your form call you have action"#"while it should be action="#"

And lastly there is one extra closing </div> at the end.

So your code should look something like this:

<!doctype html>
<html>

  <head>

    <meta charset="utf-8">
    <title>Contact</title>

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/Slideshow.css">
    <link rel="stylesheet" type="text/css" href="css/page.css">

    <script>
      function checkforblank() {

        if (document.getElementById('name').value == "") {
          alert("Entry can't be empty");
          document.getElementById('name').style.borderColor = "red";
          return false;
        }

        if (document.getElementById('email').value == "") {
          alert("Entry can't be empty");
          document.getElementById('email').style.borderColor = "red";
          return false;
        }




        var radios = document.getElementsByName("rating");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
          if (radios[i].checked) formValid = true; {
            i++;
          }
        }

        if (!formValid) {
          alert("Please Pick Rating");
          return formValid;
          document.getElementsByName("rating").style.borderColor = "red";
        }

      }

    </script>


  </head>

  <body>
    <div class="container">

      <div class="row">

        <div class="col-md-12">

          <h1> Nathan Rivera </h1>

          <h1> Portfolio </h1>

        </div>

      </div>

    </div>
    <div class="container">

      <div class="row" id="inner">

        <div class="col-lg-12 center">

          <ul class="nav nav-pills">

            <li><a href="index.html">Homepage</a></li>

            <li><a href="Portfolio.html">Portfolio</a></li>

            <li><a href="Projects.html">Projects</a></li>

            <li><a href="Contact.html">Contact</a></li>

            <li class="active"><a href="Survey.html">Survey</a></li>

          </ul>

        </div>

      </div>

      <div class="row">

        <div class="col-md-12">

          <form method="post" action="#" onSubmit="return checkforblank()">

            <fieldset>

              <label for="name"> Name: </label>
              <input type="text" id="name" name="name">
              <br>
              <br>

              <label for="email"> Email: </label>
              <input type="text" id="email" name="email">
              <br>
              <br>

              <label> Rating </label> <br>

              <input type="radio" name="rating" value="1"> 1
              <br>
              <input type="radio" name="rating" value="2"> 2
              <br>
              <input type="radio" name="rating" value="3"> 3
              <br>
              <input type="radio" name="rating" value="4"> 4
              <br>
              <input type="radio" name="rating" value="5"> 5
              <br>
              <input type="radio" name="rating" value="6"> 6
              <br>
              <input type="radio" name="rating" value="7"> 7
              <br>
              <input type="radio" name="rating" value="8"> 8
              <br>
              <input type="radio" name="rating" value="9"> 9
              <br>
              <input type="radio" name="rating" value="10"> 10
              <br>
              <br>

              <div class="form-group">

                <label for="comments">Comments:</label>
                <textarea class="form-control" rows="5" id="comments"></textarea>

              </div>

            </fieldset>

          </form>

          <form action="javascript:alert('Thank You For Your Input')" method="get" onSubmit="return checkforblank()">

            <input type="submit" value="Submit">

          </form>

        </div>

      </div>

    </div>


    <script src="Bootstrap/js/bootstrap.js"></script>
    <script src="Jquery/jquery-1.12.3.js"></script>
  </body>

</html>

If you check it in validator you'll see that there are no errors.

And, in future, please double check your code before posting questions here.

Thank you very much. I'm rather new to HTML. – nathan rivera Jun 19 '16 at 20:34 — nathan rivera, Jun 19 '16 at 20:34

score 0 · Answer 2 · edited May 23 '17 at 12:16

Labels are for one input, you are using one on 10 inputs.
This is a great example of how you might achieve what you are going for:

<fieldset>
  <legend> Rating </legend>
   <label> <input type="radio" value="1" name="rating"> 1 </label>
   <label> <input type="radio" value="2" name="rating"> 2 </label>
   <!-- etc -->
 </fieldset>

This was adapted from this post.
For more data on working fieldsets check out this article

Error validation for a radio button in HTML

2 Answers2