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

HTML5で入力検証をスキップする方法｜formnovalidate属性の使い方

HTML5では、required 属性が設定された入力フィールドは、フォーム送信時に自動的に検証されます。しかし、場合によっては検証を回避して送信したいこともあります。そのようなときに活用できるのが formnovalidate 属性です。

formnovalidate 属性を送信ボタンに指定すると、そのボタンからフォームを送信した場合に限り、入力内容の検証が無効になります。他のボタンによる送信には影響しないため、通常の送信と検証なしの送信を1つのフォーム内で使い分けられます。

サンプルコード

以下の例では、2つ目の送信ボタンに formnovalidate 属性を設定し、検証を無効化しています。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML formnovalidate属性の例</title>
  </head>
  <body>
    <form action="new.php" method="get">
      Rank <input type="number" name="rank" required><br>
      <input type="submit" value="Submit"><br>
      <input type="submit" formnovalidate="formnovalidate" value="Submit with no validation">
    </form>
  </body>
</html>

動作のポイント

  • 1つ目の「Submit」ボタンでは、rank フィールドに required 属性があるため、未入力のまま送信するとブラウザがエラーを表示します。
  • 2つ目の「Submit with no validation」ボタンには formnovalidate 属性が付いているため、このボタンを使った送信では検証が行われず、未入力でもそのまま送信できます。

formnovalidateとnovalidateの違い

似た機能として、<form> 要素自体に指定する novalidate 属性があります。novalidate はフォーム全体の検証を無効化しますが、formnovalidate は特定の送信ボタン単位で検証をスキップできる点が異なります。下書き保存など、必須項目が未完了でも送信したいケースでは、formnovalidate が便利です。

  1. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&

  2. HTMLのinput要素「required属性」とは？必須入力フィールドの設定方法を解説

    HTMLのinput要素におけるrequired属性とは<input>要素のrequired属性は、フォームの送信前に入力が必須となるフィールド（必須入力欄）を設定するために使用します。required属性が付いたフィールドが空のまま送信ボタンをクリックすると、フォームは送信されず、ブラウザによってエラーメッセージが自動的に表示されます。required属性は値を持たないブール属性のため、属性名だけで有効になり、テキストやパスワード、電話番号などあらゆるタイプの<input>要素に追加できます。JavaScriptを書かずにクライアント側で入力チェックを行えるため、フォ