HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのInput Submit formNoValidateプロパティとは？使い方とサンプルコードを解説

HTML DOM の Input Submit（送信ボタン）における formNoValidate プロパティは、送信ボタンの formNoValidate 属性値を取得・設定するために使用されます。このプロパティを使うことで、フォームデータがサーバーへ送信される際にバリデーション（妥当性検証）を行うかどうかを制御できます。<form> 要素に設定された novalidate 属性よりも優先される点が大きな特徴で、HTML5 において type="submit" の input 要素向けに新たに導入されました。

構文

formNoValidate プロパティを設定する場合の構文は以下のとおりです。

submitObject.formNoValidate = true|false

true を指定するとフォームデータはバリデーションされず、false を指定するとデータが必ず検証されます。デフォルト値は false です。

サンプルコード

それでは、Input Submit の formNoValidate プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Submit formNoValidate property</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" formnovalidate=false>
</form>
<p>下のボタンをクリックして送信すると、データが検証されます</p>
<button onclick="formValidate()">VALIDATE</button>
<p id="Sample"></p>
<script>
    function formValidate() {
        document.getElementById("SUBMIT1").formNoValidate=false;
        document.getElementById("Sample").innerHTML = "formNoValidate の値が false に設定されました。送信時にフォームデータが検証されます。";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのInput Submit formNoValidateプロパティとは？使い方とサンプルコードを解説

VALIDATE ボタンをクリックすると、JavaScript によって formNoValidate の値が false に変更され、メッセージが表示されます。

HTML DOMのInput Submit formNoValidateプロパティとは？使い方とサンプルコードを解説

補足：実務での活用ポイント

formNoValidate プロパティは、「下書き保存」のようにバリデーションを一時的にスキップしたい場合などに特に便利です。JavaScript から動的に true / false を切り替えることで、同じフォーム内でも状況に応じて検証の有無を柔軟に制御できます。ユーザーの操作フローに合わせて入力チェックを最適化したいケースでぜひ活用してみてください。

  1. HTML DOM Input Submit の name プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン

  2. HTML DOM 送信ボタンの formTarget プロパティとは？使い方を徹底解説

    HTML DOM の Input Submit formTarget プロパティは、フォームの送信ボタン（input type=submit）における formtarget 属性の値を取得・設定するためのプロパティです。このプロパティで指定した場所に、フォーム送信後のサーバーからのレスポンスが表示されます。なお、formTarget プロパティを設定すると、<form> 要素自体に指定された target 属性の値が上書きされる点に注意してください。この属性は HTML5 において、type=submit を持つ input 要素向けに新たに導入されました。構文（シンタックス）fo