braineer dispatch

ニュース・コラム

スキル 2017年 8月26日 385

Validetta.jsの使い方

Validetta.jsの使い方

はじめに

Validettaとは、シンプルかつ軽量なフォームのバリデーションを行ってくれるjQueryのプラグインです。簡単な入力チェックをスクリプトで行うときにおすすめ。

ダウンロード

ここ(Validetta)から、Validettaのサイトに行き、トップにある緑のDownload Validettaボタンをクリックすれば出来る。

使い方

まずは、ダウンロードしたファイルを設置していく。まずは、ダウンロードしたファイルのvalidatta.cssをhead内に読み込む。

 

<link rel="stylesheet" href="css//validatta.css">

 

 

jQuery本体とvalidetta.jsを/bodyの手前に読み込ませる。

 

<script type="text/javascript" src="js/jqury1.9,1.min.js"></script>
<script type="text/javascript" src="js/validetta.js"></script>

 

 

その下に、以下を記述する

<script>
$(document).ready(function() {
  $("#form").validetta();
});
</script>

 

 

html部分は以下のように記述する

<form id="form">
  <input type="text" name="exm" 
  data-validetta="required,minLength[2],maxLength[3]">
</form>

 

これだけで、簡単に利用することができる!

※複数のバリデーションをかけたい時は、上記のようにコンマで区切りスペースは入れない。入れるとバリデーションが効かなくなる。

チェック項目

フォームの各要素のdata-validettaを記述し、以下の項目を選択してバリデーションを行う。他にも、自分がチェックしてほしい項目も自作可能なので、欲しい機能がなければ作成するのもあり!

 

  • required

記入してあるかどうか(空白かどうか)

 

  • number

数字かどうか(先頭の-は数字と判断)

 

  • email

メール形式かどうか

 

  • creditCard

クレジットカード形式かどうか

 

  • equalTo[input_name]

2つのフィールドが同じかどうか

 

  • minLength[x]

最小文字数

 

  • macLength[x]

最大文字数

 

  • minChecked[x]

チェックボックスの最小数

 

  • maxChecked[x]

チェックボックスの最大数

 

  • minSelected[x]

 

セレクトボックスの最小数

  • maxSelected[x]

セレクトボックスの最大数

 

  • custom[regexp_name]

正規表現を使ったチェック

 

  • remote[validator]

外部ファイルを使ったチェック

 

エラーメッセージの変更

エラーメッセージも任意に変更することが出来る。validetta.jsの18行目から30行目に記載してあるメッセージを変更すればOK

messages = {
    required  : 'This field is required. Please be sure to check.',
    email     : 'Your E-mail address appears to be invalid.',
    number    : 'You can enter only numbers in this field.',
    maxLength : 'Maximum {count} characters allowed!',
    minLength : 'Minimum {count} characters allowed!',
    maxChecked  : 'Maximum {count} options allowed.',
    minChecked  : 'Please select minimum {count} options.',
    maxSelected : 'Maximum {count} selection allowed. ',
    minSelected : 'Minimum {count} selection allowed. ',
    notEqual    : 'Fields do not match. Please be sure to check.',
    creditCard  : 'Invalid credit card number. Please be sure to check.'
}

 

以上

ページ上へ