Question

我有一个表格，让我们说它就像这样（它实际上更复杂，但我们只是说它就像这样）：

<form>
    <ul>
        <li class="step1 step_selected">Step 1. Enter Your Information</li>
        <li class="step2">STEP 2. Fine Print</li>
    </ul>

    <div class="step1">
        <input id="firstName" name="firstName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your First Name')"  onchange="try{setCustomValidity('')}catch(e){}"/>

        <input id="lastName" name="lastName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your Last Name')"  onchange="try{setCustomValidity('')}catch(e){}"/>

        <input id="continue" name="" type="button" value="CONTINUE TO NEXT STEP" /> 
    </div>

    <div class="step2" style="display:none">
        <p>All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental.</p>
        <input name="" type="submit" value="I understand" />    
    </div>
</form>

我希望表单在单击“#continue”时对表单进行基本的HTML5验证，除非模式匹配，否则不允许单击，即使它不是提交按钮。

如果模式匹配，我希望它：

display：none“.step1”
display：block“.step2”
将“step1 stepselected”更改为“step1”
将“step2”更改为“step2 stepselected”

这是最简单的方法，我完全以错误的方式做这件事，我需要使用jquery验证吗？

Answer 1

您可以执行类似

的操作

$('form').submit(function(e) {
  var $listep = $('li.step_selected');
  if ($listep.hasClass('step1')) {
    e.preventDefault();
    var valid = true;
    $('#firstName, #lastName').each(function() {
      if (!this.validity.valid) {
        valid = false;
        return false;
      }
    })
    if (valid) {
      $('div.step1').hide();
      $('div.step2').show();
      $('li.step1').removeClass('step_selected');
      $('li.step2').addClass('step_selected');
    }
  }
})

.step_selected {
  color: green
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <ul>
    <li class="step1 step_selected">Step 1. Enter Your Information</li>
    <li class="step2">STEP 2. Fine Print</li>
  </ul>

  <div class="step1">
    <input id="firstName" name="firstName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your First Name')" onchange="try{setCustomValidity('')}catch(e){}" />

    <input id="lastName" name="lastName" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{0,20}$" oninvalid="setCustomValidity('Your Last Name')" onchange="try{setCustomValidity('')}catch(e){}" />

    <input id="continue" name="" type="submit" value="CONTINUE TO NEXT STEP" />
  </div>

  <div class="step2" style="display:none">
    <p>All characters appearing in this work are fictitious. Any resemblance to real persons, living or dead, is purely coincidental.</p>
    <input name="" type="submit" value="I understand" />
  </div>
</form>

演示：Fiddle

HTML表单有两个步骤

1 个答案: