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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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

前の記事:
次の記事:グラフを作成するjavascript「PlotKit」