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

JavaScript不要!HTMLだけで実現するクライアント側の入力検証

HTML5のrequired属性でクライアント側検証を実現

HTML5では、フォーム送信時に入力エラーを示すバルーン(ポップアップ)を表示するクライアント側の検証機能が標準で組み込まれています。この機能を利用するには、required属性を使用します。

従来、空のテキストボックスが送信されないようにするなどのクライアント側検証にはJavaScriptが必要でした。しかし、HTML5で新たに導入された「required」属性を使えば、JavaScriptを一切書かずに同様の検証を実現できます。この属性が指定された入力フィールドには必ず値の入力が求められ、空のまま送信しようとするとブラウザが自動的にエラーメッセージを表示して送信を阻止します。

コード例

以下は、required属性を使った基本的なフォームの例です。何も入力せずにSubmitボタンを押してみてください。ブラウザによってエラーのバルーンが表示され、送信がキャンセルされます。

<!DOCTYPE HTML>
<html>
    <body>
        <form action = "/cgi-bin/html5.cgi" method = "get">
            メールアドレスを入力 : <input type="text" name = "newinput" required/>
            <p>Submitボタンで送信を試してみてください</p>
            <input type = "submit" value = "submit" />
        </form>
    </body>
</html>

補足ポイント

  • required属性は単独でも機能しますが、「type="email"」や「type="url"」などと組み合わせると、入力内容の形式チェックも自動的に行われます。
  • エラーメッセージの文言やデザインはブラウザごとに異なるため、統一したデザインが必要な場合はCSSやJavaScriptによるカスタマイズを検討してください。
  • クライアント側の検証はあくまでユーザーの利便性向上のためのものであり、サーバー側でも必ず入力チェックを行うことがセキュリティ上重要です。
  1. HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

    Webフォームを送信する際、JavaScriptのonsubmitイベントを活用すると、サーバーにデータを送る前に入力内容を検証（バリデーション）できます。フォームタグにonsubmit=return 関数名()を指定し、検証関数がfalseを返すと送信処理がキャンセルされ、trueを返すとaction属性で指定したURLへデータが送信される仕組みです。 実装例：onsubmitによるテキスト入力の検証 以下は、テキストボックスの入力値が「gmail」であるかどうかを、フォーム送信時にチェックするサンプルコードです。 <!DOCTYPE html> <html lang=ja

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド