BootstrapValidator（v0.5.3）の実装方法とサンプルコードを作成します。

BootstrapValidatorの実装方法

jQuery と Bootstrap は CDN を用いてアクセスします。BootstrapValidator は「1000hz/bootstrap-validator」から zip がダウンロードできるので、それを展開して js フォルダに置きました。BootstrapValidatorからサンプル「Validator」が提供されています。その他のオプションは「Settings-BootstrapValidator」で確認してください

BootstrapValidatorのサンプルコード

BootstrapValidatorを有効にするには、各入力項目を「class=”form-group”」で囲みと、inputタグやselectタグに「class=”form-control” 」を設定します。formタグの「id」はjqueryの「$(‘#ｘｘｘｘ’).bootstrapValidator」のｘｘｘｘと一致させてください。Validatorはinputタグやselectタグに設定した「name」値に対してバリデートチェックを行います。なお、inputタグやselectタグとlabelタグを関連付けるために、「id」値と「for」値を一致させます。

http://localhost/validate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TomoSoft BootstrapValidatorのチェック</title>
 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrapValidator.min.css">
</head>
<body>
    <div class="container">
        <h1>TomoSoft BootstrapValidatorのチェック</h1>
 
        <form id="naccsdata" class="form-horizontal text-center" role="form">
 
            <div class="form-group">
                <label for="email" class="col-sm-3 control-label">E-MAIL</label>
                <div class="col-sm-4">
                    <input id="email"  name="email" placeholder="E-MAIL" type="text" class="form-control required email" />
                </div>
            </div>
             
            <div class="form-group">
                <label for="number" class="col-sm-3 control-label" >Number *</label>
                <div class="col-sm-4">
                    <select id="number" name="number" type="text" placeholder="Number" class="form-control required">
                        <option>Number</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                    </select>
                </div>
            </div>
             
            <div class="form-group">
                <label for="use" class="col-sm-3 control-label">Use *</label>
                <div class="col-sm-4">
                    <label class="radio-inline">
                    <input id="use" name="use" type="radio"value="option1" class="custom-radio" class="form-control">&nbsp; use1</label>
                    <label class="radio-inline">
                    <input id="use" name="use" type="radio"value="option2" class="custom-radio" class="form-control">&nbsp; use2</label>
                </div>
            </div>
             
            <div class="form-group ">
                <label for="departure" class="col-sm-3 control-label">departure</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="livicon" data-name="laptop" data-size="16" data-c="#555555"
                               data-hc="#555555" data-loop="true"></i>
                        </div>
                        <input id="departure" name="departure" type="text" class="form-control" id="datetime1" />
                    </div>
                </div>
            </div>
 
            <div class="form-group">
                <label for="remarks" class="col-sm-3 control-label">remarks *</small></label>
                <div class="col-sm-4">
                    <textarea name="remarks" id="remarks" class="form-control resize_vertical"
                     rows="4"></textarea>
                </div>
            </div>
 
            <div class="form-group">
                <label for="notEmptyText" class="col-sm-3 control-label">必須なテキスト</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="notEmptyText" name="notEmptyText" placeholder="この項目は必須です">
                </div>
            </div>
 
            <div class="form-group">
                <label for="digitsText" class="col-sm-3 control-label">0 と正の整数のテキスト</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="digitsText" name="digitsText" placeholder="0 と正の整数を入力してください">
                </div>
            </div>
 
            <div class="form-group">
                <label for="realNumberText" class="col-sm-3 control-label">実数のテキスト</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="realNumberText" name="realNumberText" placeholder="実数を入力してください">
                </div>
            </div>
 
            <div class="form-group">
                <label for="stringLengthText" class="col-sm-3 control-label">文字数チェックのテキスト</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="stringLengthText" name="stringLengthText" placeholder="5文字以内で入力してください">
                </div>
            </div>
 
            <div class="form-group">
                <label for="dateText" class="col-sm-3 control-label">日付フォーマットチェックのテキスト</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="dateText" name="dateText" placeholder="yyyy-MM-dd で入力してください">
                </div>
            </div>
             
        </form>
    </div>
 
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/bootstrapValidator.min.js"></script>
    <script src="js/datavalidation.js"></script>
</body>
</html>

スクリプト「datavalidation.js」でバリデートチェックを行います。バリデートチェックのため、「$(‘#ｘｘｘ’).bootstrapValidator」がformタブのidと一致させる必要があります。「message：」で、表示させるエラーテキストを変更できますが、何も設定しなければデフォルトのエラーテキストが英文で表示されます。

js/datavalidation.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$('#naccsdata').bootstrapValidator({
    live: 'enabled',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        email: {
             validators: {
                  notEmpty: { message: 'メールは必須です'},
                  emailAddress: { message: 'メールアドレスをお確かめください'}
             }
        },
        number: {
            validators: {
                notEmpty: { message: '必須なテキストは必須項目です' }
            }
        },
        use: {
            validators: {
                notEmpty: { message: '必須なテキストは必須項目です' }
            }
        },
        departure: {
            validators: {
                notEmpty: { message: '必須なテキストは必須項目です' }
            }
        },
        remarks: {
            validators: {
                notEmpty: { message: '必須なテキストは必須項目です' }
            }
        },
        notEmptyText: {
            validators: {
                notEmpty: { message: '必須なテキストは必須項目です' }
            }
        },
        digitsText: {
            validators: {
                notEmpty: { message: '0 と正の整数のテキストは必須項目です' },
                digits: { message: 'この項目は 0 と正の整数を入力してください' }
            }
        },
        realNumberText: {
            validators: {
                notEmpty: { message: '実数のテキストは必須項目です' },
                regexp: { message: '実数を入力してください', regexp: /^[-]?\d+(\.\d+)?$/ }
            }
        },
        stringLengthText: {
            validators: {
                notEmpty: { message: '文字数チェックのテキストは必須項目です' },
                stringLength: { message: '5文字以内で入力してください', min: 1, max: 5 }
            }
        },
        dateText: {
            validators: {
                notEmpty: { message: '日付フォーマットチェックのテキストは必須項目です' },
                date: { message: 'yyyy-MM-dd で入力してください', format: 'YYYY-MM-DD' }
            }
        }
    }
});

BootstrapValidatorのサンプルコードの実行

作成したサンプルコードを実行すると、次の画面がブラウザに表示されます。

データ設定画面

各項目ごとに正常なデータを設定すると、次のようにブラウザに表示されます。

有効なデータ設定

各項目ごとにエラーのデータを設定すると、次のようにブラウザに表示されます。

無効なデータ設定