メニュー

フォームバリデーション
フォームバリデーションのビヘイビアは、データをサーバに渡す前に、一連の基準に従ってデータをチェックします。

使用方法

バリデーションルールの指定

フォームバリデーションでは、フォームのバリデーションに必要なルールを含むバリデーションオブジェクトを渡す必要があります。

バリデーションオブジェクトには、フォーム要素のリストと、各フィールドをバリデートするルールが含まれています。フィールドは、`id`、`name`、または`data-validate`プロパティ(この順序)が設定オブジェクトで指定された識別子と一致することにより照合されます。バリデーションオブジェクトは、簡略表記または詳細表記のどちらか一方のみを使用する必要があります。
$('.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`プロパティを使用します。

から
2.3.1
プロンプトを関数として指定できます。これは、動的なバリデーションメッセージを必要とするフィールドのバリデーションを返す場合に役立ちます。
`$fn.form.settings.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の両方)}

ルール

バリデーションルール

バリデーションルールは、フィールドをバリデートするために必要な条件のセットです。

バリデーションルールは`$.fn.form.settings.rules`にあります。新しいグローバルバリデーションルールを追加するには、`$.fn.form.settings.rules`を変更して関数を追加します。
ルールにパラメータを渡すには、設定オブジェクトでブラケット表記を使用します。たとえば`type: 'not[dog]'`など。

empty フィールドが空である。
チェック済み チェックボックスフィールドがチェックされている。

コンテンツタイプ

email フィールドが有効なメールアドレスである。
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]

カスタムルールの追加

独自のルールを含めるようにフォーム検証を拡張できます。これらは同期的に実行される必要があることに注意してください。

// 任意のビジネスロジック window.user = { name : 'Simon', adminLevel : 1 }; // カスタムフォーム検証ルール $.fn.form.settings.rules.adminLevel = function(value, adminLevel) { return (window.user.adminLevel >= adminLevel) }; $('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'adminLevel[2]', prompt: '犬を追加するには、少なくともレベル2の管理者である必要があります' } ] } } }) ;

では、登録を進めましょう。

犬を追加

組み込みイベント

フォームは、特別にラベル付けされたフォームフィールドに自動的にイベントをアタッチします

  • フィールドは、`escape`キーを押すとフォーカスが外れます
  • フィールドは、`enter`キーを押すとフォームを送信します
  • 送信イベントは、`submit`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
  • リセットイベントは、`reset`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
  • クリアイベントは、`clear`クラスを持つフォーム内の任意の要素の`click`にアタッチされます
送信
リセット
クリア

フォームの操作

フィールドのリセット/クリア

`$('form').form('reset')`を呼び出すか、リセット要素をクリックすると、すべてのフォーム値が*デフォルト値*に戻ります。これは、ページがロードされたときにフォームフィールドに設定されていた値です。

`$('form').form('clear')`を呼び出すと、フォームフィールドからすべての値が削除され、ドロップダウンがプレースホルダーテキストにリセットされます。

フォームのリセットは、ページロード時にデフォルト値をキャッシュすることで機能します。正しく動作するには、リセットを使用するフォームはページロード時に初期化する必要があります。
リセットとクリアは、検証ルールを持つフィールドだけでなく、すべてのフォームフィールドを変更します。
送信
リセット
クリア

値の書き込み

フォームには、フォームフィールドからの読み取りとフォームフィールドへの書き込みのための動作が含まれています。

$('.writing.example form') // 1つの値を設定 .form('set value', 'name', 'Jack') // 複数の値を設定 .form('set values', { name : 'Jack', gender : 'male', colors : ['red', 'grey'], username : 'jlukic', password : 'youdliketoknow', terms : true }) ;
送信
クリア

値の取得

`get value`と`get values`を使用して、フォームフィールドから値を読み取ることもできます。

`get values`では任意の一致する識別子を使用できますが、返される値は常に要素の対応する`name`属性を使用します。
var $form = $('.get.example form'), // 1つの値を取得 colors = $form.form('get value', 'colors'), // 値のリストを取得 fields = $form.form('get values', ['name', 'colors']), // すべての値を取得 allFields = $form.form('get values') ; console.log(colors); console.log(fields); console.log(allFields);
送信

ルールの例

以下は、空またはチェックされていないコンテンツのさまざまなタイプを検証する例を示しています。

送信
$('.field.example form') .form({ on: 'blur', fields: { empty: { identifier : 'empty', rules: [ { type : 'empty', prompt : '値を入力してください' } ] }, dropdown: { identifier : 'dropdown', rules: [ { type : 'empty', prompt : 'ドロップダウン値を選択してください' } ] }, checkbox: { identifier : 'checkbox', rules: [ { type : 'checked', prompt : 'チェックボックスにチェックを入れてください' } ] } } }) ;

コンテンツタイプ

入力は、一般的なコンテンツタイプまたは独自の正規表現と照合できます。

送信
$('.type.example form') .form({ on: 'blur', fields: { integer: { identifier : 'integer', rules: [ { type : 'integer[1..100]', prompt : '整数値を入力してください' } ] }, decimal: { identifier : 'decimal', rules: [ { type : 'decimal', prompt : '有効な小数を入力してください' } ] }, number: { identifier : 'number', rules: [ { type : 'number', prompt : '有効な数値を入力してください' } ] }, email: { identifier : 'email', rules: [ { type : 'email', prompt : '有効なメールアドレスを入力してください' } ] }, url: { identifier : 'url', rules: [ { type : 'url', prompt : 'URLを入力してください' } ] }, regex: { identifier : 'regex', rules: [ { type : 'regExp[/^[a-z0-9_-]{4,16}$/]', prompt : '4~16文字のユーザー名を入力してください' } ] } } }) ;

支払い

入力は、クレジットカードやその他の支払いタイプを検証できます。

カード名 検証名 テストカード番号
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
送信
$('.payment.example form') .form({ on: 'blur', fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : '有効なクレジットカードを入力してください' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : 'VisaまたはAmexカードを入力してください' } ] } } }) ;

フィールドの照合

フィールドは、他のフィールドと一致するか、一致しないようにする必要があります。オプションフィールドと一緒に使用することを検討してください。

送信
$('.match.example form') .form({ on: 'blur', fields: { match: { identifier : 'match2', rules: [ { type : 'match[match1]', prompt : '両方のフィールドに同じ値を入力してください' } ] }, different: { identifier : 'different2', rules: [ { type : 'different[different1]', prompt : '各フィールドに異なる値を入力してください' } ] } } }) ;

長さ

入力は、コンテンツの長さと照合できます。

送信
$('.length.example form') .form({ on: 'blur', fields: { minLength: { identifier : 'minLength', rules: [ { type : 'minLength[100]', prompt : '100文字以上を入力してください' } ] }, exactLength: { identifier : 'exactLength', rules: [ { type : 'exactLength[6]', prompt : '正確に6文字を入力してください' } ] }, maxLength: { identifier : 'maxLength', rules: [ { type : 'maxLength[100]', prompt : '100文字以下を入力してください' } ] }, } }) ;

指定されたコンテンツ

検証ルールは、入力内に表示されるべきコンテンツ、または表示されないべきコンテンツを指定できます。

送信
$('.content.example form') .form({ on: 'blur', fields: { is: { identifier : 'is', rules: [ { type : 'is[dog]', prompt : '正確に「dog」を入力してください' } ] }, isExactly: { identifier : 'isExactly', rules: [ { type : 'isExactly[dog]', prompt : '正確に「dog」を入力してください' } ] }, not: { identifier : 'not', rules: [ { type : 'not[dog]', prompt : '値を入力してください。「dog」以外' } ] }, notExactly: { identifier : 'notExactly', rules: [ { type : 'notExactly[dog]', prompt : '値を入力してください。正確に「dog」以外' } ] }, contains: { identifier : 'contains', rules: [ { type : 'contains[dog]', prompt : '「dog」を含む値を入力してください' } ] }, containsExactly: { identifier : 'containsExactly', rules: [ { type : 'containsExactly[dog]', prompt : '正確に「dog」を含む値を入力してください' } ] }, doesntContain: { identifier : 'doesntContain', rules: [ { type : 'doesntContain[dog]', prompt : '「dog」を含まない値を入力してください' } ] }, doesntContainExactly: { identifier : 'doesntContainExactly', rules: [ { type : 'doesntContainExactly[dog]', prompt : '正確に「dog」を含まない値を入力してください' } ] } } }) ;

選択数

複数選択では、許可されるオプションの数を指定できます。

送信
$('.multi.example form') .form({ on: 'blur', fields: { minCount: { identifier : 'minCount', rules: [ { type : 'minCount[2]', prompt : '少なくとも2つの値を選択してください' } ] }, maxCount: { identifier : 'maxCount', rules: [ { type : 'maxCount[2]', prompt : '最大2つの値を選択してください' } ] }, exactCount: { identifier : 'exactCount', rules: [ { type : 'exactCount[2]', prompt : '2つの値を選択してください' } ] } } })

フォームの例

プログラムによるルールの追加
2.2.11の新機能

特別な動作`add field/rule`、`remove rule`、`remove field`を使用して、フィールドやルールを動的に追加または削除できます。

複数のルールと複雑なルールの追加
ルールを追加する際は、省略記法または完全なルールオブジェクトを指定できます。複数のフィールドを変更するには、フィールドを配列として指定することもできます。
// まずはユーザー名だけを検証します $('.add.example .ui.form') .form({ username: ['empty', 'minLength[5]'] }) ;
// ボタンに基づいて検証を切り替えます $('.add.example .ui.positive.button') .on('click', function() { $('.add.example .ui.form') // 詳細なフォームの追加 .form('add rule', 'gender', { rules: [ { type : 'empty', prompt : '性別を入力する必要があります' } ] }) // 簡略表記による追加 .form('add rule', 'password', ['empty', 'minLength[5]']) ; }) ;
$('.add.example .ui.negative.button') .on('click', function() { $('.add.example .ui.form') // 複数の項目を一度に削除 .form('remove fields', ['gender', 'password']) ; }) ;
追加の検証を追加する
追加の検証を削除する
送信
クリア

サーバー側の名前属性を使用する

統合によっては、nameまたはidに特定の値を使用する必要がある場合があります。このような場合は、data-validateプロパティを使用してフォームフィールドを一致させることができます。

$('.ui.form') .form( fields: { name: 'empty' } }) ;
送信

依存フィールド
2.2の新機能

他のフィールドが存在する場合にのみ使用される検証フィールドを指定できます。depends: 'id'を、このルールを評価するために空でない必要があるフィールドのIDと共に追加するだけです。

$('.ui.form') .form({ fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : '医師としての経験年数を入力してください' } ] } } }) ;
送信

オプションフィールド

パラメータoptional: trueを追加すると、フィールドが空でない場合のみ検証ルールが追加されます。

$('.ui.form') .form({ fields: { email: { identifier : 'email', rules: [ { type : 'email', prompt : '有効なメールアドレスを入力してください' } ] }, ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : '2つ目の有効なメールアドレスを入力してください' } ] } } }) ;

チケットはすべて印刷準備ができました。領収書をどこに送信しますか?

送信

サイトデフォルトの設定

$.fn.form.settings.defaultsを変更することで、サイト全体の検証設定を指定できます。これは、フィールドがフォームに表示されている場合、すべてのフォーム検証に適用されます。

$.fn.form.settings.defaults = { email: { identifier : 'email', rules: [ { type : 'email', prompt : '有効なメールアドレスを入力してください' } ] }, // このフォームにはccメールアドレスがありませんが、エラーは発生しません ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : '2つ目の有効なメールアドレスを入力してください' } ] }, };

チケットはすべて印刷準備ができました。領収書をどこに送信しますか?

送信

エラーメッセージの表示

ui messageエラーブロックを含むフォームには、自動的にフォーム検証情報が入力されます。

エラーメッセージのテンプレートは、settings.template.error を調整することで変更できます。

では、登録を進めましょう。

送信

Blur時およびその他のイベントでの検証

検証メッセージはインラインで表示することもできます。UIフォームは、クラス名promptラベルを自動的にフォーマットします。これらの検証プロンプトは、フォームの送信ではなく、入力の変更時に表示されるように設定されています。

この例では、別の検証イベントも使用しています。各要素は、デフォルトのフォーム送信ではなく、入力のblur時に検証されます。
$('.ui.form') .form({ fields : validationRules, inline : true, on : 'blur' }) ;

では、登録を進めましょう。

送信

カスタム検証の作成

フォームの検証には、複数の任意のルールを使用できます。

$('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'empty', prompt: '追加するには犬が必要です' }, { type: 'contains[fluffy]', prompt: 'ふわふわした犬だけを追加してください!' }, { type: 'not[mean]', prompt: 'なぜ意地悪な犬をリストに追加するのですか?' } ] } } }) ;

では、登録を進めましょう。

犬を追加

ビヘイビア

次のすべての動作は、次の構文を使用して呼び出すことができます。
$('.foo').form('動作名', 引数1, 引数2)
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 検証をトリガーするために使用されるイベント。submitblur、または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 フォームフィールドが無効な場合のコールバック

テンプレート

テンプレートは要素を構築するために使用されます。

テンプレートはsettings.templateにあります。すべてのフォームでテンプレートを変更するには、$.fn.form.settings.templatesを変更して関数を含めます。HTMLを返す必要があります。
テンプレート 引数 説明
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 : '呼び出したメソッドは定義されていません。' }

ダイマーメッセージ
ダイマーサブヘッダー