javascript - 具有多个 div 的页面验证

Question

我试图在有两个 div 的页面上进行验证

<form>
    <div id="first>
        <input type="text" name="name"/>
        <button id="next">Next</button>
    </div>
    <div id="second" style="display:none">
        <input type="text" name="phone">
        <button id="finish">Finish</button>
        <button id="back">Back</button>
    </div>
</form>

因此，当我单击#next 时，它会显示第二个 div，但我只想检查该 div 的验证。

谢谢

Answer 1

既然您已经在标签中包含了 jQuery，那么您绝对应该坚持使用 jQuery 插件。这可以为您节省很多不必要的工作。

一些表单向导插件:

• jformslider
• jQuery Steps
• jquery wizard
• stepify

如果您确实需要自定义表单向导，您可以从这样的内容开始(根据您的 HTML 示例):

JSFiddle

<form method="post">
  <div id="first">
    <input id="name" type="text" name="name"/>
    <button id="next">Next</button>
  </div>
  <div id="second" style="display:none;">
    <input id="phone" type="text" name="phone">
    <button id="finish">Finish</button>
    <button id="back">Back</button>
  </div>
</form>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

<script>
  $(document).ready(function () {

    $('#next').click(function (e) {
      e.preventDefault();
      if($('#name').val() == ''){
       return alert('Type name!');            
      }
      $('#second').show();
      $('#first').hide();
    });

    $('#finish').click(function (e) {
      e.preventDefault();
      alert('hello ' + $('#name').val() + '! \nYour phone nr. is: ' + $('#phone').val());
    });

    $('#back').click(function (e) {
      e.preventDefault();
      $('#first').show();
      $('#second').hide();
    }); 

  });
</script>

JSFiddle