JavaScript はどのようにして不要なフォームの送信を防ぐことができるのでしょうか?

JavaScript を使用したフォーム送信の防止

JavaScript を使用してフォームを検証する場合、特定の失敗シナリオでの送信を防止することが重要です。この記事では、フォームの送信を停止し、これらの状況に対処する方法を検討します。

JavaScript 関数から False を返す

フォームの送信を停止する 1 つの方法は、次のメソッドを返すことです。 JavaScript 関数からの false。送信ボタンをクリックすると、検証関数が呼び出されます。特定の条件が満たされると、returnToPreviousPage() という名前の関数が呼び出されます。

function returnToPreviousPage() {
    window.history.back();
}

ただし、この関数は現在、送信を妨げるのではなく、ユーザーを前のページにリダイレクトします。この問題を解決するには、他の手法を利用できます。

preventDefault() および validateForm()

一般的なアプローチは、preventDefault() メソッドをvalidateForm() 関数。

<form onsubmit="event.preventDefault(); validateMyForm();">

検証の場合、validateMyForm() 関数は false を返します。失敗します。これにより、フォームは送信できなくなります。

関数の戻り値を使用する

もう 1 つのオプションは、検証関数の戻り値を使用して送信を防ぐことです。

<form name="myForm" onsubmit="return validateMyForm();">

検証関数は次のように実装できます。

function validateMyForm() {
  if (conditions not met) {
    alert("Validation failed");
    returnToPreviousPage();
    return false;
  }

  alert("Validation passed");
  return true;
}

このメソッドを使用すると、特定のエラー メッセージを提供し、検証結果に基づいてページ ナビゲーションを処理できます。

互換性に関する考慮事項

Chrome 27.0.1453.116 m などの特定のブラウザでは、イベントの設定が必要な場合があることに注意してください。このアプローチを機能させるには、ハンドラーのパラメーターの returnValue フィールドを false に設定します。

以上がJavaScript はどのようにして不要なフォームの送信を防ぐことができるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。