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

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

Webフォームを送信する際、JavaScriptのonsubmitイベントを活用すると、サーバーにデータを送る前に入力内容を検証（バリデーション）できます。フォームタグにonsubmit="return 関数名()"を指定し、検証関数がfalseを返すと送信処理がキャンセルされ、trueを返すとaction属性で指定したURLへデータが送信される仕組みです。

実装例：onsubmitによるテキスト入力の検証

以下は、テキストボックスの入力値が「gmail」であるかどうかを、フォーム送信時にチェックするサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form onsubmit="return validateTheForm()" method="GET" action="https://mail.google.com/mail/">
<br/>
<input type="text" id="txtInput" value=""/>
<input type="submit" value="search"/>
</form>
<script>
    function validateTheForm(){
        var validation = (document.getElementById('txtInput').value == 'gmail');
        if(!validation){
            alert('エラーが発生しました。「gmail」と入力してからクリックしてください');
            return false;
        }
        return true;
    }
</script>
</body>
</html>

コードのポイント

  • onsubmit="return validateTheForm()"：フォーム送信時にvalidateTheForm()関数が呼び出されます。
  • document.getElementById('txtInput').value：テキストボックスの入力値を取得し、「gmail」と一致するか判定します。
  • return false：入力値が不正な場合にアラートを表示し、フォーム送信を中断します。
  • return true：検証に成功した場合のみ、action属性のURLへフォームが送信されます。

プログラムの実行方法

上記のコードを「index.html」など任意のファイル名で保存します。その後、VS Codeエディターでファイルを右クリックし、「Open with Live Server」を選択してブラウザーで表示してください。

動作確認（出力結果）

プログラムを実行すると、以下のような画面が表示されます。

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

ステップ1：正しい値を入力した場合

テキストボックスに「GMAIL」と入力します。

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

検索（search）ボタンをクリックすると、検証に成功し、action属性で指定されたURLへフォームデータが送信されます。

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

ステップ2：誤った値を入力した場合

「GMAIL」以外の値を入力した場合は、アラートメッセージが表示され、フォーム送信がキャンセルされます。

まず、任意の値を入力してEnterキーを押してみましょう。

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

検索ボタンをクリックすると、以下のようにアラートメッセージが表示されます。

HTMLフォームのaction属性とJavaScriptのonsubmitイベントで入力バリデーションを実装する方法

このように、onsubmitイベントとJavaScriptを組み合わせることで、クライアント側で手軽に入力チェックを行い、不正なデータの送信を防ぐことができます。

  1. HTMLとCSSでサインアップフォームを作成する方法【初心者向け】

    HTMLとCSSを組み合わせることで、モダンで使いやすいサインアップ（新規登録）フォームを簡単に作成できます。この記事では、メールアドレスとパスワードの入力欄、「ログイン状態を保持」チェックボックス、さらに登録・キャンセルボタンを備えた実用的なフォームを、実際のコード例とともにわかりやすく解説します。 サインアップフォームの完全なコード例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body{ font-family: Seg

  2. HTMLフォームのaction属性とは?使い方とサンプルコードをわかりやすく解説

    HTMLのaction属性は、フォームが送信されたときに、入力データをどのURLへ送るかを指定するための属性です。フォームを作成するうえで最も重要な属性の一つであり、データの送信先となるサーバーサイドのスクリプト(例：PHPファイルなど)を指定します。action属性の基本構文action属性の基本的な書き方は以下のとおりです。<form action=URL></form>action属性の値には、絶対URLまたは相対URLを指定できます。ここで指定したURLに対して、フォームに入力されたデータが送信されます。HTMLフォームaction属性の使用例それでは、実際にa