2016-06-19 11 views
0

Я иду через процесс проверки мой HTML с использованием W3 валидатора, когда он проверяет через мои страницы я получаю сообщение об ошибке проверки:проверка ошибок для радио-кнопки в HTML

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

Я не совсем уверен, что не так, потому что, насколько я могу судить, я использовал только один тип ввода в метке.

Вот мой код для этого сегмента:

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

Веб-страница действительно работает так или иначе, я просто хотел бы, чтобы зафиксировать проверку, если это возможно.

Вот код для всей моей страницы, если это необходимо:

<!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> 
+0

Быстрый вопрос .... Почему вы используете JS для этого, когда вы можете сделать это намного легче с JQuery? – perkes456

+0

Потому что я havent понял, как использовать jquerry. JavaScript в целом действительно запутан для меня. –

+0

Включите в проект файл jQuery, и вы можете получить такой элемент, например: if ($ ('email'). Val() == "") ... Таким образом вы можете написать гораздо более чистый и эффективный код. .. :) – perkes456

ответ

1

Есть слишком много ошибок в коде.

Во-первых, у вас есть <div> и <h1> элементов в <head>. Вы не можете этого сделать.

Тогда в вашем <label> теги , это также запрещено.

Затем в форме называть вас есть action"#" в то время как он должен быть action="#"

И, наконец, есть один дополнительный закрытие </div> в конце.

Так что ваш код должен выглядеть следующим образом:

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

Если вы проверяете его в валидатор, вы увидите, что нет никаких ошибок.

И, в будущем, пожалуйста, дважды проверьте свой код перед отправкой вопросов здесь.

+0

спасибо. Я довольно новичок в HTML. –

0

Этикетки предназначены для одного входа, вы используете один из 10 входов.
Это отличный пример того, как можно добиться того, что вы собираетесь:

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

Это была заимствована из этого post.
Для получения дополнительной информации по работе fieldsets чек this article