JavaScriptフォーム
JavaScriptフォームの検証
HTMLフォームの検証はJavaScriptで行うことができます。
フォームフィールド(fname)が空の場合、この関数はメッセージを警告し、falseを返し、フォームが送信されないようにします。
JavaScriptの例
function validateForm() {
letx = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
この関数は、フォームの送信時に呼び出すことができます。
HTMLフォームの例
<form name="myForm" action="/action_page.php" <strong>onsubmit="return validateForm()"</strong> method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
JavaScriptで数値入力を検証できる
JavaScriptは数値入力を検証するためによく使用されます。
HTMLフォームの自動検証
HTML フォームの検証は、ブラウザーによって自動的に実行できます。
フォームフィールド(fname)が空の場合、このrequired属性によりこのフォームは送信されなくなります。
HTMLフォームの例
<form action="/action_page.php" method="post">
<input type="text" name="fname" <strong>required</strong>>
<input type="submit" value="Submit">
</form>
自動HTMLフォーム検証は、Internet Explorer 9以前では機能しません。
データ検証
データ検証は、ユーザー入力がクリーンで正しく、有用であることを確認するプロセスです。
一般的な検証タスクは次のとおりです。
- ユーザーは必須フィールドをすべて入力しましたか?
- ユーザーは有効な日付を入力しましたか?
- ユーザーは数値フィールドにテキストを入力しましたか?
ほとんどの場合、データ検証の目的は、ユーザー入力が正しいことを確認することです。
検証はさまざまな方法で定義でき、さまざまな方法で展開できます。
サーバー側の検証は、入力がサーバーに送信された後、Webサーバーによって実行されます。
クライアント側の検証は、入力がWebサーバーに送信される前に、Webブラウザによって実行されます。
HTML制約検証
HTML5では、制約検証と呼ばれる新しいHTML検証概念が導入されました。
HTML制約の検証は以下に基づいています。
- 制約検証HTML入力属性
- 制約検証CSS擬似セレクター
- 制約検証DOMのプロパティとメソッド
制約検証のHTML入力属性
| Attribute | Description |
|---|---|
| disabled | 入力要素を無効にすることを指定します |
| max | 入力要素の最大値を指定します |
| min | 入力要素の最小値を指定します |
| pattern | 入力要素の値パターンを指定します |
| required | 入力フィールドに要素が必要であることを指定します |
| type | 入力要素の型を指定します |
完全なリストについては、HTML入力属性を参照してください。
制約の検証CSS疑似セレクター
| Selector | Description |
|---|---|
| :disabled | 「無効」属性が指定された入力要素を選択します |
| :invalid | 無効な値を持つ入力要素を選択します |
| :optional | 「必須」属性が指定されていない入力要素を選択します |
| required | 「必須」属性が指定された入力要素を選択します |
| :valid | 有効な値を持つ入力要素を選択します |
完全なリストについては、CSS疑似クラスを参照してください。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。