フォームの入力エラーをわかりやすくする「Form validation using jQuery」

フォームの入力補助はコンバージョンを上げるためにも必須となっています。
その中でエラー時に何がいけないのか示すことも重要と言われています。
今回はエラーをわかりやすく表示するjQueryプラグインForm validator plugin for jQueryを紹介します。
フォームの入力エラーをわかりやすくする「Form validation using jQuery」サンプル

使用方法
Form Validation Made Easyからvalidator.jsをjQuery: The Write Less, Do More, JavaScript Libraryからjquery.jsをダウンロードします。
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="validator.js" type="text/javascript"></script>

次にformを下記のようなルールで記述していけば完成です。
<form action="" onsubmit="return $(this).validate()"> //onsubmit時にエラー確認
// data-validation内に入力してほしい内容を記述します。
//長さを指定(validate_min_length length4)数字は文字数
<input name="user" data-validation="validate_min_length length4" />

// URLチェック(validate_url)
<input name="website" data-validation="validate_url" />

// パスワードの2重確認(validate_confirmationとpass_confirmation)
// 入力必須項目(required)
<input type="password" name="pass" data-validation="validate_confirmation required" />
<input type="password" name="pass_confirmation" />
<input type="submit" />
</form>

その他、emailや時間などの設定が可能です。
jQuery-Form-Validatorでご確認ください。
また、エラー内容はvalidator.jsの20行目 var lang以下で変更可能です。

フォームの入力エラーをわかりやすくする「Form validation using jQuery」サンプル

sponsors

「フォームの入力エラーをわかりやすくする「Form validation using jQuery」」をシェアする

記事作成:
記事URL:

TOP > > > フォームの入力エラーをわかりやすくする「Form validation using jQuery」