Question

我有这个表格（请注意，这只是表格的一个部分，还有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="answer_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="answer_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="answer_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>

使用<div id="phase1">，<div id="phase2">和<div id="phase3">将表单分为3个步骤。我使用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的上帝

Answer 1

您必须在输入中使用“必需”。

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

Answer 2

按钮输入类型不会提交父表单。您需要使用input type =“submit”。但是，通过一些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();
      }
  }

如果我使用type = button，HTML 5验证将消失

2 个答案: