结合jQuery的preventDefault和必需的表单输入

Question

好的，所以在我的提交按钮上添加preventDefault可以停止表单提交。这样做的结果是，它不会告诉用户需要的字段，而只是在按钮上执行click事件。

将preventDefault添加到提交处理程序中，向用户显示必需的字段，但仍然触发与按钮绑定的click事件。

我两个都需要。

<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
});

无论是否需要表单输入，都将触发click事件。

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

这将向用户显示所需的消息，但仍然执行提交按钮功能。如何做到两者兼得?我看过一些其他的问题，我可以找到这个，但似乎大多数可以通过添加preventDefault来回答form.submit。

Answer 1

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

我不需要这个按钮。单击函数，因为默认情况下它会提交表单。我只需要按下按钮。点击表单内的函数。提交。

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

Answer 2

手动触发提交事件

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