morolicious開発日記

MojoliciousとBootstrapで作られているレスポンシブなエロサイト「morolicious」の開発記録を綴りっています

jQuery ValidationプラグインでAjaxを使ってremoteバリデーションする

JavaScript

jQuery Validation Plugin jquery.validate.js

フォームのバリデーションにとても便利なjQueryプラグインですが、Ajaxを使った時にちょっとハマったのでメモ。

例えばユーザー名が使われているかチェックする時にクライアントサイドのチェックだけでは実装出来ないのでサーバに問い合わせる必要があります。

jQuery Validation Pluginではremoteを設定する事でデフォルトではonkeyup（一文字入力するごと）毎にサーバ側にリクエストしてチェックしてくれます。

コードサンプル

※Bootstrapを使っているのでCSSへの適応も考慮されています。

HTML

<form id="join-form">
	<div class="control-group">
	    <input id="username" name="username" type="text" placeholder="ユーザー名" />
	</div>
</form>

JavaScript

$("#join-form").validate({    
    errorClass: 'help-block',
    validClass: 'help-block',
    errorElement: 'span',
    validElemnt: 'span',
    errorPlacement: function(error, element){
        console.log(error);
        error.appendTo(element.parents(".control-group"));
    },
    highlight: function(element){
        $(element).parents('.control-group').removeClass('success').addClass('error');
    },
    success: function(element, validClass){
        element.text('OK').closest('.control-group').addClass('success');
    },
    rules: {
        username:{
            required: true,
            remote: {
                type: 'post',
                url: '/validate/member_name.cgi',
                dataType: 'json', //無くても動作するけど環境による？
                data: {
                    username: function(){
                        return $('#username').val();
                    }
                }
            }
        }
    }
});

サーバサイドの処理

レスポンスはJSONで返す必要があります（Mojoliciousならrender_json()で一発です）
レスポンスがtrueの場合のみsuccessとなります。


参考