フォームの値を識別するjavascript「validation.js」 : skuare.net

フォームの値を識別するjavascript「validation.js」

2007

07/06

送信フォームに入力してもらう時に数字にして欲しいところやe-mailを正しい形式で入力して欲しい時があります。
DexagogoのReally easy field validationでは入力内容を簡単に確認することが出来るjavascript「validation.js」を公開しています。

使用方法
Really easy field validationからファイル一式をダウンロードします。
head内にはprototype.js、effects.js、validation.jsを挿入し、必要に応じてCSSにstyle.cssを追加します。
対象となるformにはid名を付け、入力項目にもそれぞれclass、idを指定します。
この時classには項目に応じて以下のclassを指定する必要があります。
　・required (必須項目)
　・validate-number (数字のみ可)
　・validate-digits (数値のみ可)
　・validate-alpha (アルファベットのみ可)
　・validate-alphanum (アルファベットと数字のみ可)
　・validate-date (日付のみ可)
　・validate-email（メールアドレスのみ可)
　・validate-url (URLのみ可）
　・validate-selection（リストメニューやセレクトボックスから選択）
　・validate-one-required（チェックボックスやラジオボタンで1つ以上選択）
例）数字（必須）：<linput class="required validate-number" id="id名" name="name名" title="数字を入力してください">
さらにformダグを閉じた直後には
<script type="text/javascript">
new Validation('指定したformのid名',{useTitles:true, immediate : true});
</script>
というスクリプトを挿入することで即時識別（immediate : true）を行い、エラー時にtitle属性に記入された文字を返します（useTitles:true）。
このほかにもオプションで
　・pattern : new RegExp("^[a-zA-Z]+$","gi"), //文字だけ
　・minLength : N, // N以上の文字数あるいは桁数
　・maxLength : N, // N以下の文字数あるいは桁数
　・min : N, // N以上の数字
　・max : N, // N以下の数字
　・notOneOf : ['password', 'PASSWORD'], // 指定した文字列以外でなければだめ
　・oneOf : ['fish','chicken','beef'], // 指定した文字列でなければだめ
　・is : '5', // 指定した文字列でなければだめ
　・isNot : 'turnip', //指定した文字列はだめ
　・equalToField : 'input_id', // idで指定したフィールドと同じでなければだめ
　・notEqualToField : 'input_id', // idで指定したフィールドと同じではだめ
があり、パスワードの確認や指定した文字数以上の入力を求めることが出来ます。
フォームの値を識別するjavascript「validation.js」サンプル