使用jQuery preventDefault和必填表单输入项的组合

Question

好的，将preventDefault放在我的提交按钮上可以阻止表单提交。这样做的后果是它不会告诉用户哪些字段是必填项，只是执行了按钮上的点击事件。

将preventDefault添加到提交处理程序中可以向用户显示必填字段，但仍会触发与按钮关联的点击事件。

我需要两者兼备。

<form action="" method="post">
  <input type="text" class="class" id="id" name="name" required="required" />
</form>

现在开始讲解js代码：

$("button").click(function(event){
  event.preventDefault();
  //performs function
});

这将触发点击事件，无论是否需要表单输入。

$("form").submit(function(event){
  event.preventDefault();
});
$("button").click(function(){
  //performs function
});

这将向用户显示必填消息，但仍执行提交按钮功能。我如何同时实现这两个功能? 我查看了一些其他相关的SO问题，但似乎大多数问题可以通过添加preventDefault到form.submit来解决。

- o_O

---

尝试使用以下代码：$("form").submit(function(event){ return false; }); - Sushanth --

Answer 1

其实我之前本来想做两件事，但其实只需要做一件。

我根本不需要使用 button.click 函数，因为默认情况下它会提交表单。我只需要把 button.click 函数放在 form.submit 函数里面即可。

$("form").submit(function(event){
    //perform button function
    return false;
});

- o_O

Answer 2

手动触发提交事件。

$("button").click(function(event) {
     event.preventDefault();

     $('form').submit();
});

- Ehtesham