Question

我认为这是提出这个问题的最佳地点。所以我目前正在开发一个网站。刚遇到几个问题。每当我在输入框上点击提交时，不是隐藏该表单并显示下一个表单，它会不断刷新页面。这很奇怪，因为如果我在本地浏览页面而不是在我的服务器上，一切都可以正常工作。我会继续发布我的代码，希望有人知道我的问题。提前谢谢！

这是按钮：

 <form id="firstForm">
            <div class="form-group form-group-lg">
              <label for="InputUsername">Username</label>
              <input type="text" class="form-control" name="InputUsername" id="InputUsername"
                       placeholder="Username">
      </div>
            <button type="submit" class="btn btn-default btn-lg btn-block">Connect</button>
    </form>

这是Jquery：

$("#firstForm").validate({ rules: { InputUsername: { required: true, minlength: 1 } }, messages: { InputUsername: "Enter a valid username/email" }, submitHandler: function (form) { $(\'#firstForm\').fadeOut(function () { $(\'#secondForm\').fadeIn().removeClass(\'hidden\');

Answer 1

这并不奇怪。 类型submit <button>会触发表单操作 - 除非您在代码中指定Event.preventDefault()

或者如果您严格指定它是类型按钮 <button type="button">Connect</button>，那么表单将不会提交，您可以继续使用.validate( JS脚本。

Answer 2

您需要做的就是在您编写的按钮操作功能中使用Data Access Interfaces或event.preventDefault()，否则提交按钮将触发表单操作。

return false

Answer 3

使用preventDefault不触发重新加载操作：

$("#firstForm").submit(function(e) {
    e.preventDefault();
}).validate({...});

页面刷新提交按钮，需要它隐藏表单

3 个答案: