Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
67
Help us understand the problem. What is going on with this article?
@konnma

jQuery Validation Plugin 簡単な使い方まとめ

More than 5 years have passed since last update.

jQuery Validation Pluginの簡単な使い方まとめです。
http://jqueryvalidation.org/

基本形式

javascript
$("form").validate({
    rules: {
        "menu[]" :{
            required: true
        },
        date :{
            require_from_group: [1, ".date_group"]
        }
    },
    messages: {
        "menu[]":{
            required: "ご希望のメニューを選択してください"
        },
        date :{
            require_from_group: "日時を選択してください。"
        }
    }
});

rulesにはそれぞれのname属性に対するチェック項目を決められます。
チェックボックスなんかで「name="menu[]"」としている場合は
「"menu[]":{}」という感じで囲ってあげてください。
messagesにはそれぞれのチェック項目に対するエラー内容(テキスト)をいれます。

focusした後に何もせずblurした場合もチェックする

javascript-jquery.validate.js
if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {

↓↓↓↓↓↓

if ( !this.checkable( element ) ) {

デフォルトだと、ルールに「required」が設定されていても、
focusした後に何もせずblurした時にチェックしてくれません。
なので、上のように、「jquery.validate.js 」内のソースを修正すれば、
ちゃんとチェックしてくれるようになります。

エラー表示位置を変える場合

javascript
errorPlacement: function(error, element) {
    element.before( error );
}

デフォルトでは指定したエレメントの後にエラーが入りますが、
「errorPlacement」でエレメントの前にも表示可能です。

チェックボックスのvalidation

javascript
$('input[type="checkbox"]').on('click', function() {
    $('form').validate().element( this );
});

デフォルトでは、チェックボックスに「required」をつけても反応してくれないので、
上記を追加してやると該当エレメントのバリデーションを実行してくれます。

validationおまけ

$('form').validate();
と書いてやると、フォーム全体のバリデーションが行えます。

あとからチェック項目を変更

javascript
$( ".foo" ).rules( "add", {
    required: true,
});

ラジオボタンでAが選択したらA'を必須項目にしたい場合等は、
rules("add",{ 追加チェック項目 });
でチェック項目を増やすことができます。
rules("remove",{ 削除チェック項目 });
でチェック項目を減らすこともできます。

カスタムチェック項目

javascript
$.validator.addMethod("phone", function(value, element) {
    return this.optional(element) || /^[\d,-]+$/.test(value);
}, "数字を入力して下さい");

「$.validator.addMethod」を使って、カスタムチェック項目を作れます。
上記の例は、「数字とハイフンのみの場合OK」という感じです。
電話番号や郵便番号などに使えるかなと思います。

67
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
konnma

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
67
Help us understand the problem. What is going on with this article?