ソースを参照

#109: Add setLiveMode method

nghuuphuoc 11 年 前
コミット
65059a3022
4 ファイル変更282 行追加97 行削除
  1. 163 0
      demo/live.html
  2. 59 48
      dist/js/bootstrapValidator.js
  3. 1 1
      dist/js/bootstrapValidator.min.js
  4. 59 48
      src/js/bootstrapValidator.js

+ 163 - 0
demo/live.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BootstrapValidator demo</title>
+
+    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
+    <link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
+
+    <script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
+    <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <!-- form: -->
+        <section>
+            <div class="col-lg-8 col-lg-offset-2">
+                <div class="page-header">
+                    <h2>Multiple elements with the same name</h2>
+                </div>
+
+                <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
+                    <div class="form-group">
+                        <label class="col-lg-3 control-label">Gender</label>
+                        <div class="col-lg-5">
+                            <div class="radio">
+                                <label>
+                                    <input type="radio" name="gender" value="male" /> Male
+                                </label>
+                            </div>
+                            <div class="radio">
+                                <label>
+                                    <input type="radio" name="gender" value="female" /> Female
+                                </label>
+                            </div>
+                            <div class="radio">
+                                <label>
+                                    <input type="radio" name="gender" value="other" /> Other
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="col-lg-3 control-label">Browser</label>
+                        <div class="col-lg-5">
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="chrome" /> Google Chrome
+                                </label>
+                            </div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="firefox" /> Firefox
+                                </label>
+                            </div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="ie" /> IE
+                                </label>
+                            </div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="safari" /> Safari
+                                </label>
+                            </div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="opera" /> Opera
+                                </label>
+                            </div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" name="browsers[]" value="other" /> Other
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="col-lg-3 control-label">Editors</label>
+                        <div class="col-lg-5">
+                            <input class="form-control" type="text" name="editors[]" />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-lg-offset-3 col-lg-5">
+                            <input class="form-control" type="text" name="editors[]" />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-lg-offset-3 col-lg-5">
+                            <input class="form-control" type="text" name="editors[]" />
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-lg-offset-3 col-lg-5">
+                            <input class="form-control" type="text" name="editors[]" />
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="col-lg-offset-3 col-lg-9">
+                            <button type="button" class="btn btn-info" data-mode="enabled">Set live="enabled"</button>
+                            <button type="button" class="btn btn-info" data-mode="disabled">Set live="disabled"</button>
+                            <button type="button" class="btn btn-info" data-mode="submitted">Set live="submitted"</button>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <div class="col-lg-offset-3 col-lg-3">
+                            <button type="submit" class="btn btn-primary">Submit</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </section>
+        <!-- :form -->
+    </div>
+</div>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        $('#defaultForm').bootstrapValidator({
+            message: 'This value is not valid',
+            feedbackIcons: {
+                valid: 'glyphicon glyphicon-ok',
+                invalid: 'glyphicon glyphicon-remove',
+                validating: 'glyphicon glyphicon-refresh'
+            },
+            fields: {
+                gender: {
+                    validators: {
+                        notEmpty: {
+                            message: 'The gender is required'
+                        }
+                    }
+                },
+                'browsers[]': {
+                    validators: {
+                        notEmpty: {
+                            message: 'Please specify at least one browser you use daily for development'
+                        }
+                    }
+                },
+                'editors[]': {
+                    validators: {
+                        notEmpty: {
+                            message: 'The editor names are required'
+                        }
+                    }
+                }
+            }
+        });
+
+        $('button[data-mode]').click(function() {
+            $('#defaultForm').data('bootstrapValidator').setLiveMode($(this).attr('data-mode'));
+        });
+    });
+</script>
+</body>
+</html>

+ 59 - 48
dist/js/bootstrapValidator.js

@@ -171,7 +171,7 @@
                 this._initField(field);
             }
 
-            this._setLiveValidating();
+            this.setLiveMode(this.options.live);
         },
 
         /**
@@ -215,7 +215,7 @@
                 }
 
                 // Whenever the user change the field value, mark it as not validated yet
-                $field.on(event + '.bv', function() {
+                $field.on(event + '.update.bv', function() {
                     updateAll ? that.updateStatus(field, that.STATUS_NOT_VALIDATED, null)
                               : that.updateElementStatus($(this), that.STATUS_NOT_VALIDATED, null);
                 });
@@ -285,44 +285,12 @@
         },
 
         /**
-         * Enable live validating
-         */
-        _setLiveValidating: function() {
-            if ('enabled' == this.options.live) {
-                var that = this;
-                for (var field in this.options.fields) {
-                    (function(f) {
-                        var fields = that.getFieldElements(f);
-                        if (fields) {
-                            var type      = fields.attr('type'),
-                                total     = fields.length,
-                                updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
-                                trigger   = that.options.fields[field].trigger
-                                            || that.options.trigger
-                                            || (('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup'),
-                                events    = trigger.split(' ').map(function(item) {
-                                    return item + '.bv';
-                                }).join(' ');
-
-                            for (var i = 0; i < total; i++) {
-                                $(fields[i]).on(events, function() {
-                                    updateAll ? that.validateField(f) : that.validateFieldElement($(this), false);
-                                });
-                            }
-                        }
-                    })(field);
-                }
-            }
-        },
-
-        /**
          * Called when all validations are completed
          */
         _submit: function() {
             if (!this.isValid()) {
                 if ('submitted' == this.options.live) {
-                    this.options.live = 'enabled';
-                    this._setLiveValidating();
+                    this.setLiveMode('enabled');
                 }
 
                 // Focus to the first invalid field
@@ -348,9 +316,62 @@
         // --- Public methods ---
 
         /**
-         * Disable/Enable submit buttons
+         * Retrieve the field elements by given name
          *
-         * @param {Boolean} disabled
+         * @param {String} field The field name
+         * @returns {null|jQuery[]}
+         */
+        getFieldElements: function(field) {
+            var fields = this.$form.find(this.options.fields[field].selector || '[name="' + field + '"]');
+            return (fields.length == 0) ? null : fields;
+        },
+
+        /**
+         * Set live validating mode
+         *
+         * @param {String} mode Live validating mode. Can be 'enabled', 'disabled', 'submitted'
+         * @returns {BootstrapValidator}
+         */
+        setLiveMode: function(mode) {
+            this.options.live = mode;
+            if ('submitted' == mode) {
+                return this;
+            }
+
+            var that = this;
+            for (var field in this.options.fields) {
+                (function(f) {
+                    var fields = that.getFieldElements(f);
+                    if (fields) {
+                        var type      = fields.attr('type'),
+                            total     = fields.length,
+                            updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
+                            trigger   = that.options.fields[field].trigger
+                                || that.options.trigger
+                                || (('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup'),
+                            events    = trigger.split(' ').map(function(item) {
+                                return item + '.live.bv';
+                            }).join(' ');
+
+                        for (var i = 0; i < total; i++) {
+                            ('enabled' == mode)
+                                ? $(fields[i]).on(events, function() {
+                                    updateAll ? that.validateField(f) : that.validateFieldElement($(this), false);
+                                })
+                                : $(fields[i]).off(events);
+                        }
+                    }
+                })(field);
+            }
+
+            return this;
+        },
+
+        /**
+         * Disable/enable submit buttons
+         *
+         * @param {Boolean} disabled Can be true or false
+         * @returns {BootstrapValidator}
          */
         disableSubmitButtons: function(disabled) {
             if (!disabled) {
@@ -359,17 +380,7 @@
                 // Don't disable if the live validating mode is disabled
                 this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
             }
-        },
-
-        /**
-         * Retrieve the field elements by given name
-         *
-         * @param {String} field The field name
-         * @returns {null|jQuery[]}
-         */
-        getFieldElements: function(field) {
-            var fields = this.$form.find(this.options.fields[field].selector || '[name="' + field + '"]');
-            return (fields.length == 0) ? null : fields;
+            return this;
         },
 
         /**

ファイルの差分が大きいため隠しています
+ 1 - 1
dist/js/bootstrapValidator.min.js


+ 59 - 48
src/js/bootstrapValidator.js

@@ -170,7 +170,7 @@
                 this._initField(field);
             }
 
-            this._setLiveValidating();
+            this.setLiveMode(this.options.live);
         },
 
         /**
@@ -214,7 +214,7 @@
                 }
 
                 // Whenever the user change the field value, mark it as not validated yet
-                $field.on(event + '.bv', function() {
+                $field.on(event + '.update.bv', function() {
                     updateAll ? that.updateStatus(field, that.STATUS_NOT_VALIDATED, null)
                               : that.updateElementStatus($(this), that.STATUS_NOT_VALIDATED, null);
                 });
@@ -284,44 +284,12 @@
         },
 
         /**
-         * Enable live validating
-         */
-        _setLiveValidating: function() {
-            if ('enabled' == this.options.live) {
-                var that = this;
-                for (var field in this.options.fields) {
-                    (function(f) {
-                        var fields = that.getFieldElements(f);
-                        if (fields) {
-                            var type      = fields.attr('type'),
-                                total     = fields.length,
-                                updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
-                                trigger   = that.options.fields[field].trigger
-                                            || that.options.trigger
-                                            || (('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup'),
-                                events    = trigger.split(' ').map(function(item) {
-                                    return item + '.bv';
-                                }).join(' ');
-
-                            for (var i = 0; i < total; i++) {
-                                $(fields[i]).on(events, function() {
-                                    updateAll ? that.validateField(f) : that.validateFieldElement($(this), false);
-                                });
-                            }
-                        }
-                    })(field);
-                }
-            }
-        },
-
-        /**
          * Called when all validations are completed
          */
         _submit: function() {
             if (!this.isValid()) {
                 if ('submitted' == this.options.live) {
-                    this.options.live = 'enabled';
-                    this._setLiveValidating();
+                    this.setLiveMode('enabled');
                 }
 
                 // Focus to the first invalid field
@@ -347,9 +315,62 @@
         // --- Public methods ---
 
         /**
-         * Disable/Enable submit buttons
+         * Retrieve the field elements by given name
          *
-         * @param {Boolean} disabled
+         * @param {String} field The field name
+         * @returns {null|jQuery[]}
+         */
+        getFieldElements: function(field) {
+            var fields = this.$form.find(this.options.fields[field].selector || '[name="' + field + '"]');
+            return (fields.length == 0) ? null : fields;
+        },
+
+        /**
+         * Set live validating mode
+         *
+         * @param {String} mode Live validating mode. Can be 'enabled', 'disabled', 'submitted'
+         * @returns {BootstrapValidator}
+         */
+        setLiveMode: function(mode) {
+            this.options.live = mode;
+            if ('submitted' == mode) {
+                return this;
+            }
+
+            var that = this;
+            for (var field in this.options.fields) {
+                (function(f) {
+                    var fields = that.getFieldElements(f);
+                    if (fields) {
+                        var type      = fields.attr('type'),
+                            total     = fields.length,
+                            updateAll = (total == 1) || ('radio' == type) || ('checkbox' == type),
+                            trigger   = that.options.fields[field].trigger
+                                || that.options.trigger
+                                || (('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == fields[0].tagName) ? 'change' : 'keyup'),
+                            events    = trigger.split(' ').map(function(item) {
+                                return item + '.live.bv';
+                            }).join(' ');
+
+                        for (var i = 0; i < total; i++) {
+                            ('enabled' == mode)
+                                ? $(fields[i]).on(events, function() {
+                                    updateAll ? that.validateField(f) : that.validateFieldElement($(this), false);
+                                })
+                                : $(fields[i]).off(events);
+                        }
+                    }
+                })(field);
+            }
+
+            return this;
+        },
+
+        /**
+         * Disable/enable submit buttons
+         *
+         * @param {Boolean} disabled Can be true or false
+         * @returns {BootstrapValidator}
          */
         disableSubmitButtons: function(disabled) {
             if (!disabled) {
@@ -358,17 +379,7 @@
                 // Don't disable if the live validating mode is disabled
                 this.$form.find(this.options.submitButtons).attr('disabled', 'disabled');
             }
-        },
-
-        /**
-         * Retrieve the field elements by given name
-         *
-         * @param {String} field The field name
-         * @returns {null|jQuery[]}
-         */
-        getFieldElements: function(field) {
-            var fields = this.$form.find(this.options.fields[field].selector || '[name="' + field + '"]');
-            return (fields.length == 0) ? null : fields;
+            return this;
         },
 
         /**