0

我创建了以下表单：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>

更新：我有这个与现有验证一起工作的 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>
4

6 回答 6

1

让单选按钮名称都相同。这将它们组合在一起。那么你所要做的就是让第一个拥有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

编辑 这是我刚刚使用 jQuery 制作的小提琴。这是您想要的真正验证。 http://jsfiddle.net/slyfox13/H9Dw2/

于 2013-11-06T17:55:34.523 回答
0

您必须为所有无线电输入标签提供相同的名称。像这样 

<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>
于 2013-11-06T17:56:34.370 回答
0

输入的名字不一定都需要相同，即然后检查questionone的值不为null来验证

于 2013-11-06T17:48:18.953 回答
0

为所有单选按钮设置相同的名称，因为单选按钮可供选择。

    <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 */
}
于 2013-11-06T17:55:45.977 回答
0

首先，您需要将单选按钮名称更改为相同的名称。前任

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

    }
});
于 2013-11-06T17:55:55.100 回答
0

您的收音机都应该具有相同的名称。在代码中，您实际上有 4 个不同的输入，每个输入作为它们自己的表单数据参数，而不是 4 个无线电输入影响一个表单数据参数。

于 2013-11-06T17:46:16.300 回答