如果我使用类型 = 按钮，HTML 5 验证就会消失

HTML 5 validations disappear if I use type = button

本文关键字：HTML 验证 消失 按钮 类型 如果      更新时间：2023-09-26

>我有这个表格（注意，这只是表格的一部分，还有2个）：

<form action="index.php?s=2468" id="multiphase" method="post" class="form-horizontal">
<fieldset>
<label class="form-controlradio"> 
<input id="1-0" type="radio" class="custom" name="answerswer_16e0807d-5612-11e5-824b-22000a699fb3" required="" value="EPOS programma">
EPOS programma </label>
<label class="form-controlradio"> <input id="1-1" type="radio" class="custom" name="answerswer_16e0807d-5612-11e5-824b-22000a699fb3" required="" value="Analogue Cash Register">
Analogue Cash Register </label> 
<label class="form-controlradio"> <input id="1-2" type="radio" class="custom" name="answerswer_16e0807d-5612-11e5-824b-22000a699fb3" required="" value="EPOS system">
EPOS system </label>
<input type="button" value="Next" name="" onclick="processPhase1()" class="btn btn-primary" id="multiphase-element-13">
</fieldset>
</form>

该形式分为 3 步，分别使用 <div id="phase1">、<div id="phase2"> 和 <div id="phase3"> 。我用JS来显示或隐藏div的，这是代码：

function processPhase1(){
    var val1 = getRadioVal( document.getElementById('multiphase'), 'answer_16e0807d-5612-11e5-824b-22000a699fb3' );
    var val2 = getRadioVal( document.getElementById('multiphase'), 'answer_4f14f466-5612-11e5-824b-22000a699fb3' );
    if(val1.length > 1 && val2.length > 1){
        _("phase1").style.display = "none";
        _("phase2").style.display = "block";
        _("progressBar").style.width = "33%";
    }
}

问题是我需要使用input type="button"，如果我使用它，HTML 5 验证就会消失。我知道有一种黑客方法可以使其工作，但我在JS上不是很上帝

您必须在输入中使用"必需"。

http://www.the-art-of-web.com/html/html5-form-validation/

按钮输入类型不会提交父表单。您需要使用输入类型="提交"。但是，使用一些Javascript，您应该能够实现所需的验证：

  document.querySelector('input[type=button]').onclick = function() {
       var i = document.querySelector(".custom");
       var f = document.getElementById("multiphase");
       if (i.checkValidity() == false) {
          f.innerHTML = f.innerHTML + i.validationMessage;
       } else {
          f.submit();
      }
  }
相关文章：