bootstrapでのJavaScriptエラーチェック

お問い合わせフォームの入力チェックというのは本来サーバーサイド側でやらなくてはいけないのですが、JavaScriptによってクライアント側でやることも可能です。

入力欄にフォーカスして、遷移したときにすぐにエラーチェックなどができるとユーザーにとっては使いやすいですね。

HTML側でBootstrapを使っており、そんなシステムの必要性があったのでメモしておきます。

Contents

1 jquery validation
2 htmlのソース
3 エラーチェックを行うjavascript
4 参考リンク

jquery validation

http://jqueryvalidation.org/

結構有名どころみたいですね。

処理も簡単です。

ここからダウンロードし、htmlと同階層にjsというフォルダを作り、そこにおいてあげ下記のように読み込ませてあげればOKです。(※あとは後述する自作のJavaScriptを読み込ませればOKです。)

<script src="js/jquery.validate.min.js"></script>

1	<script src="js/jquery.validate.min.js"></script>

htmlのソース

まずはform部分です。

<div class="control-group">
	<label class="control-label" for="applicant_name">お名前(※必須)</label>
	<div class="controls">
		<input type="text" name="applicant_name" id="applicant_name" placeholder="お名前をフルネームで入力してください。" class="form-control "　/>				
	</div>
</div>

<div class="control-group">
	<label class="control-label" for="applicant_email">メールアドレス(※必須)</label>
	<div class="controls">
		<input type="text" name="applicant_email" id="applicant_email" placeholder="メールアドレスを入力してください。" class="form-control"　/>
	</div>
</div>

<div class="control-group">
	<label class="control-label" for="question">質問したいことなど</label>
	<textarea name="question" id="question" placeholder="質問事項などあれば入力してください。" class="form-control"　></textarea>
</div>

<div class="text-center">
	<input type="button" id="apply_button" class="validate btn btn-warning btn-lg" name="apply_button" value="申し込む">
</div>

</div>

<label class="control-label" for="applicant_email">メールアドレス(※必須)</label>

</div>

<label class="control-label" for="question">質問したいことなど</label>

</div>

</div>

エラーチェックを行うjavascript

$(document).ready(function() {
    //ここにformのidを書いておきます。
    $("#registrationForm").validate({
        rules: {
	    //書くフィールドの変数名と対象となるバリデーション
            //詳細は公式リンク先をご覧ください。
            applicant_day:{
                required: true			
			},
            applicant_name: {
                required: true ,
            },
            applicant_email: {
                required: true,
				email:true,
            }
        },
        //対象となるエラーメッセージ
        messages: {
	    applicant_day:"参加ご希望日を入力してください",
            applicant_name: "ユーザ名を入力してください",
            applicant_email: "メールアドレスを入力してください"
        },
	errorClass: "help-inline",
        validClass: "help-inline",
        errorElement: "span",
        validElement: "span",
        wrapper: "span",
        highlight: function(wrapper) {
            $(wrapper).parents('.control-group').removeClass('success').addClass('error');
        },
        success: function(wrapper, validClass) {
            wrapper.text('OK!').addClass('help-inline').closest('.control-group').addClass('success');
        }
    });
    //Validation成功時の遷移先
    $("input.validate").click(function() {
        //ここにはPHPに投げるなど処理が通った後の動きを書きます。
		
    });
	
});

$(document).ready(function() {

//ここにformのidを書いておきます。

$("#registrationForm").validate({

rules: {

//書くフィールドの変数名と対象となるバリデーション

//詳細は公式リンク先をご覧ください。

applicant_day:{

required: true

applicant_name: {

required: true ,

applicant_email: {

required: true,

email:true,

}

//対象となるエラーメッセージ

messages: {

applicant_day:"参加ご希望日を入力してください",

applicant_name: "ユーザ名を入力してください",

applicant_email: "メールアドレスを入力してください"

errorClass: "help-inline",

validClass: "help-inline",

errorElement: "span",

validElement: "span",

wrapper: "span",

highlight: function(wrapper) {

$(wrapper).parents('.control-group').removeClass('success').addClass('error');

success: function(wrapper, validClass) {

wrapper.text('OK!').addClass('help-inline').closest('.control-group').addClass('success');

}

});

//Validation成功時の遷移先

$("input.validate").click(function() {

//ここにはPHPに投げるなど処理が通った後の動きを書きます。

});

エラーメッセージ以下の処理はまだ私の理解が追いついてないです。

わかり次第、書いていきます・・・

参考リンク

jquery validation
高機能ライブラリ「jQuery」とそのPlugin「Validation」

bootstrapとの組み合わせ
jQuery ValidationをTwitter Bootstrapと組み合わせて使う