ホーム » JavaScript DOM » JavaScript フォーム

JavaScript フォーム

概要: このチュートリアルでは、JavaScript フォーム API について学習します。フォームへのアクセス、要素の値の取得、フォームデータの検証、フォームの送信などです。

フォームの基本

HTML でフォームを作成するには、<form> 要素を使用します。

<form action="/signup" method="post" id="signup"> 
</form>Code language: HTML, XML (xml)

<form> 要素には、action と method の 2 つの重要な属性があります。

  • action 属性は、フォームの送信を処理する URL を指定します。この例では、アクションは /signup URL です。
  • method 属性は、フォームを送信する HTTP メソッドを指定します。通常、メソッドは post または get のいずれかです。

一般的に、サーバーからデータを取得する場合は get メソッドを使用し、サーバー上のデータを変更する場合は post メソッドを使用します。

JavaScript は、フォームを表すために HTMLFormElement オブジェクトを使用します。HTMLFormElement には、HTML 属性に対応する次のプロパティがあります。

  • action – フォームデータを処理する URL です。<form> 要素の action 属性と同等です。
  • method – HTTP メソッドであり、<form> 要素の method 属性と同等です。

HTMLFormElement 要素には、次の便利なメソッドも用意されています。

  • submit() – フォームを送信します。
  • reset() – フォームをリセットします。

フォームの参照

<form> 要素を参照するには、getElementById() のような DOM 選択メソッドを使用できます。

const form = document.getElementById('subscribe');Code language: JavaScript (javascript)

HTML ドキュメントには複数のフォームを含めることができます。document.forms プロパティは、ドキュメント上のフォームのコレクション (HTMLFormControlsCollection) を返します。

document.formsCode language: JavaScript (javascript)

フォームを参照するには、インデックスを使用します。たとえば、次のステートメントは、HTML ドキュメントの最初のフォームを返します。

document.forms[0]Code language: CSS (css)

フォームの送信

通常、フォームには送信ボタンがあります。クリックすると、ブラウザはフォームデータをサーバーに送信します。送信ボタンを作成するには、type が submit の <input> または <button> 要素を使用します。

<input type="submit" value="Subscribe">Code language: HTML, XML (xml)

または

<button type="submit">Subscribe</button>Code language: HTML, XML (xml)

送信ボタンにフォーカスがあり、Enter キーを押すと、ブラウザもフォームデータを送信します。

フォームを送信すると、リクエストがサーバーに送信される前に submit イベントが発生します。これにより、フォームデータを検証する機会が得られます。フォームデータが無効な場合、フォームの送信を停止できます。

submit イベントにイベントリスナーをアタッチするには、次のようにフォーム要素の addEventListener() メソッドを使用します。

const form  = document.getElementById('signup');

form.addEventListener('submit', (event) => {
    // handle the form data
});Code language: JavaScript (javascript)

フォームの送信を停止するには、次のように submit イベントハンドラー内で event オブジェクトの preventDefault() メソッドを呼び出します。

form.addEventListener('submit', (event) => {
    // stop form submission
    event.preventDefault();
});Code language: PHP (php)

通常、フォームデータが無効な場合は event.preventDefault() メソッドを呼び出します。JavaScript でフォームを送信するには、フォームオブジェクトの submit() メソッドを呼び出します。

form.submit();Code language: CSS (css)

form.submit() は submit イベントを発生させないことに注意してください。したがって、このメソッドを呼び出す前に必ずフォームを検証する必要があります。

フォームフィールドへのアクセス

フォームフィールドにアクセスするには、getElementsByName()、getElementById()、querySelector() などの DOM メソッドを使用できます。

また、form オブジェクトの elements プロパティを使用することもできます。form.elements プロパティは、フォーム要素のコレクションを格納します。

JavaScript では、インデックス、id、または名前で要素にアクセスできます。次の 2 つの <input> 要素を含むサインアップフォームがあるとします。

<form action="signup.html" method="post" id="signup">
	<h1>Sign Up</h1>
	<div class="field">
		<label for="name">Name:</label>
		<input type="text" id="name" name="name" placeholder="Enter your fullname" />
		<small></small>
	</div>
	<div class="field">
		<label for="email">Email:</label>
		<input type="text" id="email" name="email" placeholder="Enter your email address" />
		<small></small>
	</div>
	<button type="submit">Subscribe</button>
</form>
Code language: HTML, XML (xml)

フォームの要素にアクセスするには、まずフォーム要素を取得します。

const form = document.getElementById('signup');Code language: JavaScript (javascript)

そして、インデックス、id、または名前を使用して要素にアクセスします。次は最初のフォーム要素にアクセスします。

form.elements[0]; // by index
form.elements['name']; // by name
form.elements['name']; // by id (name & id are the same in this case)Code language: JavaScript (javascript)

次は 2 番目の input 要素にアクセスします。

form.elements[1]; // by index
form.elements['email']; //  by name
form.elements['email']; // by idCode language: JavaScript (javascript)

フォームフィールドにアクセスしたら、value プロパティを使用してその値にアクセスできます。たとえば、

const form = document.getElementById('signup');
const name = form.elements['name'];
const email = form.elements['email'];

// getting the element's value
let fullName = name.value;
let emailAddress = email.value;Code language: JavaScript (javascript)

すべてをまとめる：サインアップフォーム

以下は、サインアップフォームを含む HTML ドキュメントを示しています。ライブデモはこちらをご覧ください。

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>JavaScript Form Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div class="container">
			<form action="signup.html" method="post" id="signup">
				<h1>Sign Up</h1>
				<div class="field">
					<label for="name">Name:</label>
					<input type="text" id="name" name="name" placeholder="Enter your fullname" />
					<small></small>
				</div>
				<div class="field">
					<label for="email">Email:</label>
					<input type="text" id="email" name="email" placeholder="Enter your email address" />
					<small></small>
				</div>
				<div class="field">
					<button type="submit" class="full">Subscribe</button>
				</div>
			</form>
		</div>
		<script src="js/app.js"></script>
	</body>
</html>
Code language: HTML, XML (xml)

HTML ドキュメントは、style.css および app.js ファイルを参照します。<input> 要素に無効なデータがある場合にエラーメッセージを表示するために、<small> 要素を使用します。

情報を何も入力せずにフォームを送信すると、次のエラーが発生します。

名前は入力したが、メールアドレスの形式が無効な場合、次のエラーが発生します。

以下は、完全な app.js ファイルを示しています。

// show a message with a type of the input
function showMessage(input, message, type) {
	// get the small element and set the message
	const msg = input.parentNode.querySelector("small");
	msg.innerText = message;
	// update the class for the input
	input.className = type ? "success" : "error";
	return type;
}

function showError(input, message) {
	return showMessage(input, message, false);
}

function showSuccess(input) {
	return showMessage(input, "", true);
}

function hasValue(input, message) {
	if (input.value.trim() === "") {
		return showError(input, message);
	}
	return showSuccess(input);
}

function validateEmail(input, requiredMsg, invalidMsg) {
	// check if the value is not empty
	if (!hasValue(input, requiredMsg)) {
		return false;
	}
	// validate email format
	const emailRegex =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	const email = input.value.trim();
	if (!emailRegex.test(email)) {
		return showError(input, invalidMsg);
	}
	return true;
}

const form = document.querySelector("#signup");

const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";

form.addEventListener("submit", function (event) {
	// stop form submission
	event.preventDefault();

	// validate the form
	let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
	let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
	// if valid, submit the form.
	if (nameValid && emailValid) {
		alert("Demo only. No form was posted.");
	}
});

Code language: JavaScript (javascript)

仕組み

showMessage() 関数

showMessage() 関数は、入力要素、メッセージ、およびタイプを受け取ります。

// show a message with a type of the input
function showMessage(input, message, type) {
	// get the <small> element and set the message
	const msg = input.parentNode.querySelector("small");
	msg.innerText = message;
	// update the class for the input
	input.className = type ? "success" : "error";
	return type;
}Code language: JavaScript (javascript)

以下は、フォームの名前入力フィールドを示しています。

<div class="field">
	<label for="name">Name:</label>
	<input type="text" id="name" name="name" placeholder="Enter your fullname" />
	<small></small>
</div>Code language: HTML, XML (xml)

名前の値が空白の場合、最初にその親であるクラス "field" を持つ <div> を取得する必要があります。

input.parentNodeCode language: CSS (css)

次に、<small> 要素を選択する必要があります。

const msg = input.parentNode.querySelector("small");Code language: JavaScript (javascript)

次に、メッセージを更新します。

msg.innerText = message;

その後、type パラメータの値に基づいて、入力フィールドの CSS クラスを変更します。type が true の場合、入力のクラスを success に変更します。それ以外の場合は、クラスを error に変更します。

input.className = type ? "success" : "error";Code language: JavaScript (javascript)

最後に、タイプの値を返します。

return type;Code language: JavaScript (javascript)

showError() 関数と showSuccess() 関数

showError() 関数と showSuccess() 関数は showMessage() 関数を呼び出します。showError() 関数は常に false を返し、showSuccess() 関数は常に true を返します。また、showSuccess() 関数はエラーメッセージを空の文字列に設定します。

function showError(input, message) {
	return showMessage(input, message, false);
}

function showSuccess(input) {
	return showMessage(input, "", true);
}Code language: JavaScript (javascript)

hasValue() 関数

hasValue() 関数は、入力要素に値があるかどうかを確認し、それに応じて showError() 関数または showSuccess() 関数を使用してエラーメッセージを表示します。

function hasValue(input, message) {
	if (input.value.trim() === "") {
		return showError(input, message);
	}
	return showSuccess(input);
}Code language: JavaScript (javascript)

validateEmail() 関数

validateEmail() 関数は、メールフィールドに有効なメールアドレスが含まれているかどうかを検証します。

function validateEmail(input, requiredMsg, invalidMsg) {
	// check if the value is not empty
	if (!hasValue(input, requiredMsg)) {
		return false;
	}
	// validate email format
	const emailRegex =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	const email = input.value.trim();
	if (!emailRegex.test(email)) {
		return showError(input, invalidMsg);
	}
	return true;
}Code language: PHP (php)

validateEmail() 関数は hasValue() 関数を呼び出して、フィールドの値が空かどうかを確認します。入力フィールドが空の場合、requiredMsg を表示します。

メールを検証するために、正規表現を使用します。メールが無効な場合、validateEmail() 関数は invalidMsg を表示します。

submit イベントハンドラー

まず、querySelector() メソッドを使用して、id でサインアップフォームを選択します。

const form = document.querySelector("#signup");Code language: JavaScript (javascript)

次に、エラーメッセージを格納する定数をいくつか定義します。

const NAME_REQUIRED = "Please enter your name";
const EMAIL_REQUIRED = "Please enter your email";
const EMAIL_INVALID = "Please enter a correct email address format";Code language: JavaScript (javascript)

3 番目に、addEventListener() メソッドを使用して、サインアップフォームの submit イベントリスナーを追加します。

form.addEventListener("submit", function (event) {
	// stop form submission
	event.preventDefault();

	// validate the form
	let nameValid = hasValue(form.elements["name"], NAME_REQUIRED);
	let emailValid = validateEmail(form.elements["email"], EMAIL_REQUIRED, EMAIL_INVALID);
	// if valid, submit the form.
	if (nameValid && emailValid) {
		alert("Demo only. No form was posted.");
	}
});
Code language: JavaScript (javascript)

submit イベントハンドラーで

  1. event.preventDefault() メソッドを呼び出して、フォームの送信を停止します。
  2. hasValue() 関数と validateEmail() 関数を使用して、名前とメールフィールドを検証します。
  3. 名前とメールの両方が有効な場合は、アラートを表示します。実際のアプリケーションでは、form.submit() メソッドを呼び出してフォームを送信する必要があります。

まとめ

  • HTML フォームを作成するには、<form> 要素を使用します。
  • <form> 要素を選択するには、getElementById() や querySelector() などの DOM メソッドを使用します。document.forms[index] も数値インデックスでフォーム要素を返します。
  • フォーム要素にアクセスするには、form.elements を使用します。
  • ユーザーがフォームの送信ボタンをクリックすると、submit イベントが発生します。
このチュートリアルは役に立ちましたか？
JavaScript MutationObserver
前へ
JavaScript MutationObserver
次へ
JavaScript チェックボックス
JavaScript Checkbox