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插件。这可以为您节省大量不必要的工作。

一些表单向导插件：

如果你真的需要自定义表单向导，你可以从这样的东西开始（根据你的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

Answer 2

问题是你在所有三个按钮上使用#next。如果您只想检查一个div的验证，则应该使所有ID不同

<button id="next">Next</button>
<button id="finish">Finish</button>
<button id="back">Back</button>

我们假设你只想检查#next div的验证。

然后，您可以使用JQuery选择器$(#next)

即使所有按钮都具有相同的ID

，仍然可以

您可以使用$(#next:first)选择ID为#next

的第一个按钮

但是请记住一件事

Classes可以在网页上多次使用

IDs通常每页只能使用一次

在具有多个div的页面上进行验证

2 个答案: