结合 jQuery preventDefault 和所需的表单输入答案

【问题标题】：Combine jQuery preventDefault and required form inputs结合 jQuery preventDefault 和所需的表单输入
【发布时间】：2013-05-28 00:15:33
【问题描述】：

好的，所以将 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 来回答。

【问题讨论】：

【解决方案1】：

手动触发提交事件。

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

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

【讨论】：

【解决方案2】：

当我只需要做一件事时，我实际上是在尝试做两件事。

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

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

【讨论】：