jQuery-Validation-Plugin Bootstrap 連携サンプル

jQuery Validation Plugin と Bootstrap3 を連携させます。

by KURO KUMO

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_ja.js "></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container">
    <!-- Bootstrapのフォーム -->
    <form class="form-horizontal" method="get" action="">
        <fieldset>
            <legend>入力フォーム</legend>
            <!-- 各項目を form-group で区切る -->
            <div class="form-group has-feedback">
                <label for="cname" class="control-label col-md-3">名前 (必須、少なくとも2文字以上)</label>
                <div class="col-md-9">
                    <input id="cname" name="name" type="text" class="form-control" minlength="2" required><span class="form-control-feedback"></span>

                    <ul class="help-block">
                        <li>必須、少なくとも2文字。</li>
                    </ul>
                </div>
            </div>
            <!-- 各項目を form-group で区切る -->
            <div class="form-group has-feedback">
                <label for="cemail" class="control-label col-md-3">メールアドレス (必須)</label>
                <div class="col-md-9">
                    <input id="cemail" type="email" name="email" class="form-control" required><span class="form-control-feedback"></span>

                    <ul class="help-block">
                        <li>必須。</li>
                    </ul>
                </div>
            </div>
            <!-- 各項目を form-group で区切る -->
            <div class="form-group has-feedback">
                <label for="curl" class="control-label col-md-3">URL (オプション)</label>
                <div class="col-md-9">
                    <input id="curl" type="url" name="url" class="form-control"><span class="form-control-feedback"></span>

                    <ul class="help-block">
                     ...

JavaScript

// 初期化処理
(function ($) {

    // 初期値の設定
    $.validator.setDefaults({

        // エラーメッセージの要素
        errorElement: 'li',

        // エラーメッセージを表示する処理
        errorPlacement: function (error, element) {

            var $help = element.parent().find('ul.help-block');

            error.appendTo($help);
        },

        // エラークラス
        errorClass: 'has-error',

        // 正常クラス
        validClass: 'has-success',

        // エラーの場合の処理
        highlight: function (element, errorClass, validClass) {

            var $formGroup = $(element).closest('div.form-group');
            var $feedback = $formGroup.find('span.form-control-feedback');

            // フォームグループにエラークラスを設定する
            $formGroup.addClass(errorClass).removeClass(validClass);
            // フィードバックアイコンにエラーを設定する
            $feedback.addClass('glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
        },

        // 正常の場合の処理
        unhighlight: function (element, errorClass, validClass) {

            var $formGroup = $(element).closest('div.form-group');
            var $feedback = $formGroup.find('span.form-control-feedback');

            // フォームグループに正常クラスを設定する
            $formGroup.removeClass(errorClass).addClass(validClass);
            // フィードバックアイコンに正常を設定する
            $feedback.addClass('glyphicon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
        }
    });

}(jQuery));

// DOM構築後の処理
$(function () {

    $('form').each(function (index, element) {

        var $form = $(element);
        var validator = $form.validate();

        // フォームのリセットイベントハンドラを登録する
        $form.bind('reset', function () {

            validator.resetForm();

            // form-group からエラークラス・正常クラスを削除する
            $form.find('div.form-group').each(function (index, element) {

                $(element).removeClass($.validator.defaults.errorClass).removeClass($.validator.defaults.validClass);
            });

            // フィードバックアイコンを削除する
           ...