JavaScriptフォーム
JavaScriptフォームの検証
HTMLフォームの検証はJavaScriptで実行できます。
フォームフィールド(fname)が空の場合、この関数はメッセージを警告し、falseを返し、フォームが送信されないようにします。
JavaScriptの例
function validateForm() {
let
x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
この関数は、フォームが送信されたときに呼び出すことができます。
HTMLフォームの例
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScriptは数値入力を検証できます
JavaScriptは、数値入力を検証するためによく使用されます。
1から10までの数字を入力してください
自動HTMLフォーム検証
HTMLフォームの検証は、ブラウザによって自動的に実行できます。
フォームフィールド(fname)が空の場合、required
属性はこのフォームが送信されないようにします。
HTMLフォームの例
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
自動HTMLフォーム検証は、Internet Explorer9以前では機能しません。
データ検証
データ検証は、ユーザー入力がクリーンで正しく、有用であることを確認するプロセスです。
一般的な検証タスクは次のとおりです。
- ユーザーはすべての必須フィールドに入力しましたか?
- ユーザーは有効な日付を入力しましたか?
- ユーザーは数値フィールドにテキストを入力しましたか?
ほとんどの場合、データ検証の目的は、正しいユーザー入力を確認することです。
検証は、さまざまな方法で定義でき、さまざまな方法で展開できます。
サーバー側の検証は、入力がサーバーに送信された後、Webサーバーによって実行されます。
クライアント側の検証は、入力がWebサーバーに送信される前に、Webブラウザーによって実行されます。
HTML制約の検証
HTML5では、制約検証と呼ばれる新しいHTML検証の概念が導入されました。
HTML制約の検証は、以下に基づいています。
- 制約検証HTML 入力属性
- 制約検証CSS疑似セレクター
- 制約検証DOMのプロパティとメソッド
制約検証HTML入力属性
Attribute | Description |
---|---|
disabled | Specifies that the input element should be disabled |
max | Specifies the maximum value of an input element |
min | Specifies the minimum value of an input element |
pattern | Specifies the value pattern of an input element |
required | Specifies that the input field requires an element |
type | Specifies the type of an input element |
完全なリストについては、HTML入力属性にアクセスしてください。
制約検証CSS疑似セレクター
Selector | Description |
---|---|
:disabled | Selects input elements with the "disabled" attribute specified |
:invalid | Selects input elements with invalid values |
:optional | Selects input elements with no "required" attribute specified |
:required | Selects input elements with the "required" attribute specified |
:valid | Selects input elements with valid values |
完全なリストについては、CSS疑似クラスにアクセスしてください。