nathan rivera nathan rivera - 5 months ago 18
HTML Question

error validation for a radio button in HTML

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

he 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>

Answer

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 you 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.