使用方法
バリデーションルールの指定
フォームバリデーションでは、フォームのバリデーションに必要なルールを含むバリデーションオブジェクトを渡す必要があります。
$('.ui.form') .form({ fields: { name : 'empty', gender : 'empty', username : 'empty', password : ['minLength[6]', 'empty'], skills : ['minCount[2]', 'empty'], terms : 'checked' } }) ;
$('.ui.form') .form({ fields: { name: { identifier: 'name', rules: [ { type : 'empty', prompt : '名前を入力してください' } ] }, skills: { identifier: 'skills', rules: [ { type : 'minCount[2]', prompt : '少なくとも2つのスキルを選択してください' } ] }, gender: { identifier: 'gender', rules: [ { type : 'empty', prompt : '性別を選択してください' } ] }, username: { identifier: 'username', rules: [ { type : 'empty', prompt : 'ユーザー名を入力してください' } ] }, password: { identifier: 'password', rules: [ { type : 'empty', prompt : 'パスワードを入力してください' }, { type : 'minLength[6]', prompt : 'パスワードは{ruleValue}文字以上である必要があります' } ] }, terms: { identifier: 'terms', rules: [ { type : 'checked', prompt : '利用規約に同意する必要があります' } ] } } }) ;
ルールへのパラメータの渡し方2.2.3の新機能
通常、パラメータを含むルールは`minLength[2]`のように、値をブラケットで渡して記述します。
文字列としてプロパティを渡すのが理想的でない場合、または別のJavaScript変数から値を取得している場合は、`value`を使用してルール値を渡すことを検討することをお勧めします。
$('.ui.form').form({ fields: { color: { identifier: 'color', rules: [{ type: 'regExp', value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i, }] } } });
プロンプトのカスタマイズ
フォームバリデーションには、ほとんどの場合、デフォルトのエラープロンプトが含まれていますが、これらのプロンプトは非常に一般的です。バリデーションプロンプトのカスタムパーソナライズされた値を指定するには、ルールに`prompt`プロパティを使用します。
プロンプトは、以下の値が置き換えられたカスタムテンプレートもサポートしています。
{name} | フィールドのラベルの現在のテキスト、またはラベルがない場合はプレースホルダーテキスト |
{identifier} | フィールドの照合に使用される識別子 |
{value} | 現在のフィールド値 |
{ruleValue} | ルールに渡される値。たとえば、`minLength[100]`は、この値を100に設定します。 |
$('.ui.form') .form({ fields: { field1: { rules: [ { type : 'empty' } ] }, field2: { rules: [ { type : 'exactly[dog]', prompt : '{name}は"{value}"に設定されていますが、これは完全に間違っています。{ruleValue}である必要があります' } ] }, field3: { rules: [ { type : 'exactly[cat]', prompt : function(value) { if(value == 'dog') { return '猫を入れるように言ったのに、犬を入れたじゃない!'; } return 'それは猫ではありません'; } } ] }, } }) ;
フィールドの照合
デフォルトでは、バリデーションオブジェクトで使用されるプロパティ名は、対応するフィールドにバリデーションルールを照合するために、各入力の`id`、`name`、または`data-validate`プロパティと照合されます。
異なる識別子を指定する必要がある場合は、各バリデーションルールで`identifier`プロパティを使用できます。
$('.ui.form') .form({ fields: { name: { identifier : 'special-name', rules: [ { type : 'empty' } ] } } }) ;
プログラムによるバリデーション2.2.8で更新
フォームバリデーションは、フォーム全体または個々のフィールドのバリデーションをプログラムでトリガーし、フォームまたは個々のフィールドのバリデーションをチェックするための追加のビヘイビアを提供します。
構文については、ビヘイビアセクションを参照してください。
フォームのバリデーション | フォーム全体をバリデートし、必要に応じてエラーを表示します。 |
有効かどうか | フォームが有効かどうかを返します。 |
有効かどうか(fieldName) | フォーム内のフィールドが有効かどうかを返します(UIは更新しません)。 |
フィールドのバリデーション(fieldName) | 特定のフィールドをバリデートし、必要に応じてエラーを表示します。 |
$('.ui.form') .form({ fields: { email: 'empty', name: 'empty' } }) ; if( $('.ui.form').form('is valid', 'email')) { // emailは有効 } if( $('.ui.form').form('is valid')) { // フォームは有効(emailとnameの両方)}
ルール
バリデーションルール
バリデーションルールは、フィールドをバリデートするために必要な条件のセットです。
空
empty | フィールドが空である。 |
チェック済み | チェックボックスフィールドがチェックされている。 |
コンテンツタイプ
フィールドが有効なメールアドレスである。 | ||
url | フィールドがURLである。 | |
整数 | フィールドが整数値であるか、整数範囲と一致する。 | integer またはinteger[1..10] |
小数 | フィールドは小数である必要があります。 | |
数値 | フィールドは、小数または非小数の任意の数値です。 | |
regExp[expression] | 正規表現と一致します。ブラケット表記を使用する場合、正規表現の値はエスケープする必要があります。 |
regExp[/^[a-z0-9_-]{3,16}$/gi]
または
regExp[/^[a-z0-9_-]{3,16}$/]
|
支払い
creditCard | フィールドが有効なクレジットカードである。 | creditCard |
creditCard[types] | フィールドが指定されたカードタイプの配列と一致する。 | creditCard[visa,mastercard,unionpay] |
指定されたコンテンツ
contains | フィールドにテキストが含まれている(大文字と小文字を区別しない)。 | contains[foo] |
containsExactly | フィールドにテキストが含まれている(大文字と小文字を区別する)。 | containsExactly[foo] |
doesntContain | フィールドにテキストが含まれていません(大文字と小文字の区別なし) | doesntContain[foo] |
doesntContainExactly | フィールドにテキストが含まれていません(大文字と小文字の区別あり) | doesntContainExactly[foo] |
is | フィールドが値と一致します(大文字と小文字の区別なし) | is[foo] |
isExactly | フィールドが値と一致します(大文字と小文字の区別あり) | isExactly[foo] |
not | フィールドが値と一致しません(大文字と小文字の区別なし) | not[foo] |
notExactly | フィールドが値と一致しません(大文字と小文字の区別あり) | notExactly[foo] |
長さ
minLength | フィールドの長さが最小長未満です | minLength[5] |
exactLength | フィールドの長さが正確に指定された長さです | exactLength[16] |
maxLength | フィールドの長さが最大長未満です | maxLength[50] |
フィールドの照合
match | フィールドは、別の検証フィールドの値と一致する必要があります(例:パスワード確認) | match[password] |
different | フィールドは、別の指定されたフィールドと異なる必要があります | different[choice] |
選択数
minCount | 複数選択フィールドには、最低(数)個の選択が含まれています | minCount[count] |
exactCount | 複数選択フィールドには、正確に(数)個の選択が含まれています | exactCount[count] |
maxCount | 複数選択フィールドには、最大(数)個の選択が含まれています | maxCount[count] |
カスタムルールの追加
独自のルールを含めるようにフォーム検証を拡張できます。これらは同期的に実行される必要があることに注意してください。
組み込みイベント
フォームは、特別にラベル付けされたフォームフィールドに自動的にイベントをアタッチします
- フィールドは、`escape`キーを押すとフォーカスが外れます
- フィールドは、`enter`キーを押すとフォームを送信します
- 送信イベントは、`submit`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
- リセットイベントは、`reset`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
- クリアイベントは、`clear`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
フォームの操作
フィールドのリセット/クリア
`$('form').form('reset')`を呼び出すか、リセット要素をクリックすると、すべてのフォーム値が*デフォルト値*に戻ります。これは、ページがロードされたときにフォームフィールドに設定されていた値です。
`$('form').form('clear')`を呼び出すと、フォームフィールドからすべての値が削除され、ドロップダウンがプレースホルダーテキストにリセットされます。
値の書き込み
フォームには、フォームフィールドからの読み取りとフォームフィールドへの書き込みのための動作が含まれています。
値の取得
`get value`と`get values`を使用して、フォームフィールドから値を読み取ることもできます。
ルールの例
空
以下は、空またはチェックされていないコンテンツのさまざまなタイプを検証する例を示しています。
コンテンツタイプ
入力は、一般的なコンテンツタイプまたは独自の正規表現と照合できます。
支払い
入力は、クレジットカードやその他の支払いタイプを検証できます。
カード名 | 検証名 | テストカード番号 |
Visa | visa |
4565340519181845 |
American Express | amex |
378282246310005 |
Mastercard | mastercard |
5200828282828210 |
Discover | discover |
6011111111111117 |
Unionpay | unionpay |
6240008631401148 |
JCB | jcb |
3530111333300000 |
ダイナースクラブ | dinersClub |
38520000023237 |
Maestro | maestro |
6799990100000000019 |
Laser | laser |
630490017740292441 |
Visa Electron | visaElectron |
4917300800000000 |
フィールドの照合
フィールドは、他のフィールドと一致するか、一致しないようにする必要があります。オプションフィールドと一緒に使用することを検討してください。
長さ
入力は、コンテンツの長さと照合できます。
指定されたコンテンツ
検証ルールは、入力内に表示されるべきコンテンツ、または表示されないべきコンテンツを指定できます。
選択数
複数選択では、許可されるオプションの数を指定できます。
フォームの例
プログラムによるルールの追加2.2.11の新機能
特別な動作`add field/rule`、`remove rule`、`remove field`を使用して、フィールドやルールを動的に追加または削除できます。
ドロップダウンの検証
ドロップダウンも、他のフォームフィールドと同様に検証できます。検証ルールを、ドロップダウンに関連付けられたinput
またはselect
に合わせるだけです。
サーバー側の名前属性を使用する
統合によっては、name
またはid
に特定の値を使用する必要がある場合があります。このような場合は、data-validate
プロパティを使用してフォームフィールドを一致させることができます。
依存フィールド2.2の新機能
他のフィールドが存在する場合にのみ使用される検証フィールドを指定できます。depends: 'id'
を、このルールを評価するために空でない必要があるフィールドのIDと共に追加するだけです。
オプションフィールド
パラメータoptional: true
を追加すると、フィールドが空でない場合のみ検証ルールが追加されます。
サイトデフォルトの設定
$.fn.form.settings.defaults
を変更することで、サイト全体の検証設定を指定できます。これは、フィールドがフォームに表示されている場合、すべてのフォーム検証に適用されます。
エラーメッセージの表示
ui messageエラーブロックを含むフォームには、自動的にフォーム検証情報が入力されます。
Blur時およびその他のイベントでの検証
検証メッセージはインラインで表示することもできます。UIフォームは、クラス名prompt
でラベルを自動的にフォーマットします。これらの検証プロンプトは、フォームの送信ではなく、入力の変更時に表示されるように設定されています。
カスタム検証の作成
フォームの検証には、複数の任意のルールを使用できます。
ビヘイビア
次のすべての動作は、次の構文を使用して呼び出すことができます。submit | 選択したフォームを送信します |
有効かどうか | フォームが検証ルールに合格したかどうかをtrue/falseで返します |
add rule(field, rules) 2.2.11の新機能 |
フィールドの既存のルールにルールを追加します。add field としてもエイリアス化されます。 |
add fields(fields) 2.2.11の新機能 |
既存のフィールドにfieldsオブジェクトを追加します。 |
remove rule(field, rules) 2.2.11の新機能 |
他のルールを残して、フィールドから特定のルールを削除します。 |
remove field(field) 2.2.11の新機能 |
フィールドのすべての検証を削除します。 |
add prompt(identifier, errors) | 指定された識別子を持つフィールドにエラープロンプトを追加します。 |
有効かどうか(fieldName) | フィールドが検証ルールに合格したかどうかをtrue/falseで返します。 |
フォームのバリデーション | フォームを検証し、UIを更新し、onSuccessまたはonFailureを呼び出します。 |
フィールドのバリデーション(fieldName) | フィールドを検証し、UIを更新し、onSuccessまたはonFailureを呼び出します。 |
get field(id) | IDに一致するname、id、またはdata-validateメタデータを持つ要素を返します。 |
get value(id) | idを持つ要素の値を返します。 |
get values(ids) | idの配列に一致する要素値のオブジェクトを返します。IDが渡されない場合は、すべてのフィールドを返します。 |
set value(id) | idを持つ要素の値を設定します。 |
set values(values) | 渡されたvaluesオブジェクトのキー/値のペアを、一致するidに設定します。 |
get validation(element) | jQueryで参照された入力フィールドの検証ルールを返します。 |
has field(identifier) | フィールドが存在するかどうかを返します。 |
add errors(errors) | エラーの配列が与えられた場合、フォームにエラーを追加します。 |
add prompt(id, prompt) | idを持つ要素にカスタムユーザープロンプトを追加します。 |
設定
フォームの設定
フォームの設定は、フォームの検証動作を変更します。
設定 | デフォルト | 説明 |
---|---|---|
keyboardShortcuts | true | EnterキーとEscapeキーのキーボードショートカットを追加して、それぞれフォームを送信し、フィールドのフォーカスを外します。 |
on | submit | 検証をトリガーするために使用されるイベント。submit、blur、またはchangeのいずれかになります。 |
revalidate | true | trueに設定すると、入力の変更時にエラーのあるフィールドを再検証します。 |
delay | true | on: change を使用する場合、またはフィールドを再検証する場合、最後の文字を入力してからフィールドを検証するまでの遅延。 |
inline | false | フィールド検証エラー時にインラインエラーを追加します。 |
transition | scale | 検証エラーをアニメーション化するときに使用する名前付きトランジション。ui transitionsを含めずにフェードとスライドダウンを使用できます。 |
duration | 150 | インラインプロンプトのアニメーション速度 |
フォームプロンプト
デフォルトのフォームプロンプトを変更するための設定
設定 | デフォルト |
---|---|
text |
text: { unspecifiedRule : '有効な値を入力してください', unspecifiedField : 'このフィールド' }
|
prompt |
prompt: { empty : '{name}には値が必要です', checked : '{name}をチェックする必要があります', email : '{name}は有効なメールアドレスである必要があります', url : '{name}は有効なURLである必要があります', regExp : '{name}のフォーマットが正しくありません', integer : '{name}は整数である必要があります', decimal : '{name}は小数である必要があります', number : '{name}には数値を設定する必要があります', is : '{name}は\'{ruleValue}\'である必要があります', isExactly : '{name}は正確に\'{ruleValue}\'である必要があります', not : '{name}は\'{ruleValue}\'に設定できません', notExactly : '{name}は正確に\'{ruleValue}\'に設定できません', contain : '{name}には\'{ruleValue}\'を含めることができません', containExactly : '{name}には正確に\'{ruleValue}\'を含めることができません', doesntContain : '{name}には\'{ruleValue}\'を含める必要があります', doesntContainExactly : '{name}には正確に\'{ruleValue}\'を含める必要があります', minLength : '{name}は少なくとも{ruleValue}文字である必要があります', length : '{name}は少なくとも{ruleValue}文字である必要があります', exactLength : '{name}は正確に{ruleValue}文字である必要があります', maxLength : '{name}は{ruleValue}文字を超えることはできません', match : '{name}は{ruleValue}フィールドと一致する必要があります', different : '{name}は{ruleValue}フィールドとは異なる値である必要があります', creditCard : '{name}は有効なクレジットカード番号である必要があります', minCount : '{name}は少なくとも{ruleValue}個の選択肢が必要です', exactCount : '{name}は正確に{ruleValue}個の選択肢が必要です', maxCount : '{name}は{ruleValue}個以下の選択肢が必要です' }
|
コールバック
コールバックは、特定の動作後に発生する関数を指定します。
設定 | コンテキスト | 説明 |
---|---|---|
onValid | field | 各有効なフィールドに対するコールバック |
onInvalid | field | 各無効なフィールドに対するコールバック |
onSuccess(event, fields) | form | フォームがすべて有効な場合のコールバック |
onFailure(formErrors, fields) | form | フォームフィールドが無効な場合のコールバック |
テンプレート
テンプレートは要素を構築するために使用されます。
テンプレート | 引数 | 説明 |
---|---|---|
error | エラー(配列) | エラーメッセージの内容を構築します。 |
prompt | エラー(配列) | ユーザーに無効なフィールドを促す要素を構築します。 |
DOM設定
DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します。
設定 | デフォルト | 説明 |
---|---|---|
namespace | form | イベント名前空間。モジュールの分解が、要素にアタッチされている他のイベントに影響を与えないようにします。 |
selector |
selector : { message : '.error.message', field : 'input, textarea, select', group : '.field', input : 'input', prompt : '.prompt', submit : '.submit' }
|
機能をDOMに一致させるために使用されるセレクター |
metadata |
metadata : { validate: 'validate' },
|
HTML5メタデータ属性 |
className |
className : { active : 'active', placeholder : 'default', disabled : 'disabled', visible : 'visible' }
|
状態にスタイルを付けるために使用されるクラス名 |
デバッグ設定
デバッグ設定は、コンソールへのデバッグ出力を制御します。
設定 | デフォルト | 説明 |
---|---|---|
name | Form | デバッグログで使用される名前 |
debug | False | コンソールに標準的なデバッグ出力を提供します。 |
performance | True | コンソールに標準的なデバッグ出力を提供します。 |
verbose | False | コンソールに補助的なデバッグ出力を提供します。 |
errors |
errors : { method : '呼び出したメソッドは定義されていません。' }
|