微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在我的多步表单中验证我的输入类型收音机?当我点击下一步时,它被转移到下一步

如何解决如何在我的多步表单中验证我的输入类型收音机?当我点击下一步时,它被转移到下一步

我正在使用多步表单,如果未选择单选,我想阻止以分步形式输入单选,然后不转发另一步。我输入的文本类型已经过验证。

        allNextBtn.click(function(e) {
        e.preventDefault();
        var curStep = $(this).closest(".setup-content"),curStepBtn = curStep.attr("id"),nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]')
            .parent()
            .next()
            .children("a"),**curInputs = curStep.find(
                "input[type='text'],input[type='url'],input[type='email'],input[type='phone'],input[type='date']"
            ),**
            isValid = true;
        $(".form-group").removeClass("alert alert-danger");
        $(".msg_error").html("");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i])
                    .closest(".form-group")
                    .addClass(" alert alert-danger");
                $(".msg_error").html("All fields are  mandatory.");
            }
            //console.log(!curInputs[i].validity.valid);
        }


 <input type="radio" name="customer_budget" value="$0 - $15,000">
 <input type="radio" name="customer_budget" value="$15,001 - $30,000">
 <input type="radio" name="customer_budget" value="$30,001 - $50000">
 <input type="radio" name="customer_budget" value="$50,001 - Above">
              

enter image description here

解决方法

function getSelectedRadioValue(name) {
  var radios = document.getElementsByName(name);
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      return radios[i].value;
    }
  }
}

function result() {
  var score = 0;
  score += parseInt(getSelectedRadioValue("q1")) || 0;
  score += parseInt(getSelectedRadioValue("q2")) || 0;
  score += parseInt(getSelectedRadioValue("q3")) || 0;
  score += parseInt(getSelectedRadioValue("q4")) || 0;
  document.getElementById('result').innerHTML = ("You selected " + score);
  document.getElementById("questions").style.display = 'none';
  document.getElementById('result').style.display = 'block';
}
window.onload = function() {
  check.onclick = result;
}
<body>
  <div class="topnav">

  </div><br><br>
  <div class="center123">
    <br>
    <div id="questions" class="divhide">
      <div class="divh2">
        <b>1) What is the square root of 64?</b>
        <div class="answers"><br>
          <label class="radiobox">
    <input class="radio" type="radio" value="9000" name="q1">9000
    </label>
          <br><br><br>
          <label class="radiobox">
    <input class="radio" type="radio" value="60000" name="q2">60000
    </label>
          <br><br><br>
          <label class="radiobox">
    <input class="radio" type="radio" value="8000" name="q3">8000
    </label>
          <br><br><br>
          <label class="radiobox">
    <input class="radio" type="radio" value="12000" name="q4">12000
    </label>
          <br><br><br>
        </div>
      </div>
      <br>
      <input type="hidden" name="jq1" id="jq1" />

      <input class="button" type="button" id="check" value="SUBMITT">
      <font align="center" size="10" color="black">
    </div>

    <p id="result" style="display:none;">Result</p>
    </font><br>
    <a href="secondstep.html" style="display:none;" id="result">Next Step</a>
</body>

试试这个

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。