Как проверить радиокнопки?

Question

Я создал следующий вид: http://jsfiddle.net/baumdexterous/GYNSu/1/

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

Как включить проверку правильных кнопок с помощью этого существующего скрипта? Спасибо.

<ul> 
     <li class="required"> 
      <label>What is the U.S. Capital? Please select your answer below:</label> 
      <div class="questionsone"> 
       <input name="questionone" type="radio" value="a">a) New York<br> 
       <input name="questionone" type="radio" value="b">b) Washington DC<br> 
       <input name="questionone" type="radio" value="c">c) Seattle<br> 
       <input name="questionone" type="radio" value="d">d) Portland<br> 
      </div> 
     </li> 
    </ul> 

Update: У меня есть эта часть JavaScript, который работает с существующей проверки. Попытка выяснить, как добавить способ обнаружения радиокнопки:

<script> 
     $(function() { 
      var root = $("#wizard").scrollable(); 
      // some variables that we need 
      var api = root.scrollable(), 
       drawer = $("#drawer"); 
      // validation logic is done inside the onBeforeSeek callback 
      api.onBeforeSeek(function(event, i) { 
       // we are going 1 step backwards so no need for validation 
       if (api.getIndex() < i) { 
        // 1. get current page 
        var page = root.find(".page").eq(api.getIndex()), 
         // 2. .. and all required fields inside the page 
         inputs = page.find(".required :input").removeClass("error"), 
         // 3. .. which are empty 
         empty = inputs.filter(function() { 
          return $(this).val().replace(/\s*/g, '') == ''; 
         }); 
        // if there are empty fields, then 
        if (empty.length) { 
         // slide down the drawer 
         drawer.slideDown(function() { 
          // colored flash effect 
          drawer.css("backgroundColor", "#229"); 
          setTimeout(function() { 
           drawer.css("backgroundColor", "#fff"); 
          }, 1000); 
         }); 
         // add a CSS class name "error" for empty & required fields 
         empty.addClass("error"); 
         // cancel seeking of the scrollable by returning false 
         return false; 
         // everything is good 
        } else { 
         // hide the drawer 
         drawer.slideUp(); 
        } 
       } 
       // update status bar 
       $("#status li").removeClass("active").eq(i).addClass("active"); 
      }); 
      // if tab is pressed on the next button seek to next page 
      root.find("button.next").keydown(function(e) { 
       if (e.keyCode == 9) { 
        // seeks to next tab by executing our validation routine 
        api.next(); 
        e.preventDefault(); 
       } 
      }); 
     }); 
    </script> 

Answer 1

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

Answer 2

Входные имена не все должны быть одинаковыми, то есть, а затем проверить, что значение questionone не равно нулю для проверки

Answer 3

Есть названия кнопок радио все то же самое. Это группирует их вместе. Тогда все, что вам нужно сделать, это сделать первый один имеет checked="true"

<input name="question" type="radio" value="a" checked="true">a) New York<br> 
<input name="question" type="radio" value="b">b) Washington DC<br> 
<input name="question" type="radio" value="c">c) Seattle<br> 
<input name="question" type="radio" value="d">d) Portland<br> 

Это делает их отправить по крайней мере одну вещь. В противном случае вы должны проверить выбранное значение ввода.

Также все текстовые входы могут иметь только атрибут required, и это гарантирует, что что-то там. HTML5 имеет это подтверждение.

http://www.w3schools.com/tags/att_input_required.asp

EDIT Вот скрипку я только что сделал с помощью JQuery. Это истинная проверка, которую вы хотите. http://jsfiddle.net/slyfox13/H9Dw2/

Answer 4

Установить одноименное имя для всех радиокнопок, так как радиокнопки есть для одного выбора.

<input name="questionone" type="radio" value="a">a) New York<br> 
    <input name="questionone" type="radio" value="b">b) Washington DC<br> 
    <input name="questionone" type="radio" value="c">c) Seattle<br> 
    <input name="questionone" type="radio" value="d">d) Portland<br> 

Проверка с помощью JQuery:

if($("input[type=radio,name=questionone]:checked").length >0) 
{  
    /* do something */ 
} 

Answer 5

Прежде всего, необходимо изменить кнопки радио имена всех быть то же самое. ex

<ul> 
    <li class="required"> 
     <label>What is the U.S. Capital? Please select your answer below:</label> 
     <div class="questionsone"> 
      <input name="question" type="radio" value="a">a) New York<br> 
      <input name="question" type="radio" value="b">b) Washington DC<br> 
      <input name="question" type="radio" value="c">c) Seattle<br> 
      <input name="question" type="radio" value="d">d) Portland<br> 
     </div> 
    </li> 
</ul> 

Чтобы вы могли выбрать только те опции. Затем вам нужно создать функцию document.ready(). Добавьте этот код в документ document.ready()

$(document).ready(function() { 
    function RadioTest(){ 
    inputs = document.getElementsByName('question'); 
      for (index = 0; index < inputs.length; ++index) { 
       if(inputs[index].checked!=true){ 
           alert("radio not selected"); 
            return false; 
         } 
      } 

    } 
}); 

Answer 6

Вы должны указать имя для всех тегов радиовхода. как этот

<div class="questionsone"> 
      <input name="qstn1" type="radio" value="a">a) New York<br> 
      <input name="qstn1" type="radio" value="b">b) Washington DC<br> 
      <input name="qstn1" type="radio" value="c">c) Seattle<br> 
      <input name="qstn1" type="radio" value="d">d) Portland<br> 
    </div>