javascript - jQuery preventDefault と必要なフォーム入力を組み合わせる

Question

OK、送信ボタンに 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の質問をいくつか見ましたが、form.submitにpreventDefaultを追加することでほとんどの回答が得られるようです。

score 7 · Accepted Answer

1つだけをする必要があるのに、実際には2つのことをやろうとしていました.

デフォルトではフォームを送信するため、button.click関数はまったく必要ありませんでした。代わりに、button.click 関数を form.submit 内に配置する必要がありました。

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

2 に答える 2