添加验证以查看是否未选择单选按钮,所有问题都是强制性的

时间:2017-04-21 06:24:02

标签: javascript php jquery

我有以下代码,其中有5个问题。我想要回答所有5个问题,如果没有填写任何问题,用户将获得验证。

javascript代码

question 1
<ul class="option">
   <li>  <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree</li>
    <li> <input type="radio" name="question1" id="d1" value="2">Disagree</li>
     <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Dis<li>agree</li>
  <li>  <input type="radio" name="question1" id="a1" value="4">Agree</li>
  <li>   <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li></ul>
<br/><br/>

question 2
<ul class="option">
    <li> <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree</li>
    <li> <input type="radio" name="question2" id="d2" value="2">Disagree</li>
   <li>  <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree</li>
   <li> <input type="radio" name="question2" id="a2" value="4">Agree</li?
   <li>  <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
</li></ul>
<br/><br/>

我收到警告作为空白,只写了一行,请回答以下问题,但内部没有问题编号

1 个答案:

答案 0 :(得分:2)

只需将您的问题放入标记(我已将其放在span标记中)并使用唯一ID,它应该与您的代码一起使用。

&#13;
&#13;
$(document).on('submit', 'form', function () {

    var validate = true;
    var unanswered = new Array();

    // Loop through available sets
    $('.option').each(function () {
        // Question text
        var question = $(this).prev();
        // Validate
        if (!$(this).find('input').is(':checked')) {
            // Didn't validate ... dispaly alert or do something
            //alert(JSON.stringify($(this).siblings()));
            unanswered.push(question.text());
            question.css('color', 'red'); // Highlight unanswered question
            validate = false;
        }
    });

    if (unanswered.length > 0) {
    //alert(unanswered);
        msg = "Please answer the following questions:\n" + unanswered.join('\n'); 
        alert(msg);
    }
    return validate;
});
&#13;
<body>
<form id='form' action='#' method='post'>

<span id='q1'>question 1</span>
<ul class="option">
   <li>  <input type="radio" name="question1" id="sd1" value="1">Strongly Disagree</li>
    <li> <input type="radio" name="question1" id="d1" value="2">Disagree</li>
     <input type="radio" name="question1" id="n1" value="3">Neither Agree Nor Dis<li>agree</li>
  <li>  <input type="radio" name="question1" id="a1" value="4">Agree</li>
  <li>   <input type="radio" name="question1" id="sa1" value="5">Strongly Agree
</li></ul>
<br/><br/>

<span id='q2'>question 2</span>
<ul class="option">
    <li> <input type="radio" name="question2" id="sd2" value="1">Strongly Disagree</li>
    <li> <input type="radio" name="question2" id="d2" value="2">Disagree</li>
   <li>  <input type="radio" name="question2" id="n2" value="3">Neither Agree Nor Disagree</li>
   <li> <input type="radio" name="question2" id="a2" value="4">Agree</li>
   <li>  <input type="radio" name="question2" id="sa2" value="5">Strongly Agree
</li></ul>
<input type='submit' value='submit'>
</form>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
</body>
&#13;
&#13;
&#13;