Home Explore Help
Sign In
githab
/
bootstrapvalidator
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

#121: Add events for form validate successfully or not

nghuuphuoc 11 years ago
parent
dd50795100
commit
cea35f664f
5 changed files with 471 additions and 101 deletions
Unified View Show Diff Stats
  1. 5 1
      CHANGELOG.md
  2. 304 0
      demo/event.html
  3. 80 49
      dist/js/bootstrapValidator.js
  4. 2 2
      dist/js/bootstrapValidator.min.js
  5. 80 49
      src/js/bootstrapValidator.js

+ 5 - 1
CHANGELOG.md
View File 

@@ -1,6 +1,10 @@
 
 # Change Log
 
 # Change Log
 
 
 
-## v0.4.3 (not released yet)
 
+## v0.5.0 (not released yet)
 
+
 
+* [#121](https://github.com/nghuuphuoc/bootstrapvalidator/issues/121): Add events for form validate successfully or not
 
+
 
+## v0.4.3 (2005-05-05)
 
 
 
 * [#77](https://github.com/nghuuphuoc/bootstrapvalidator/issues/77): Add ```file``` validator
 
 * [#77](https://github.com/nghuuphuoc/bootstrapvalidator/issues/77): Add ```file``` validator
 
 * [#179](https://github.com/nghuuphuoc/bootstrapvalidator/issues/179): Add ```vat``` validator, support 32 countries
 
 * [#179](https://github.com/nghuuphuoc/bootstrapvalidator/issues/179): Add ```vat``` validator, support 32 countries

+ 304 - 0
demo/event.html
View File 

@@ -0,0 +1,304 @@
 
+<!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>Sign up</h2>
 
+                    </div>
 
+
 
+                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Full name</label>
 
+                            <div class="col-lg-4">
 
+                                <input type="text" class="form-control" name="firstName" placeholder="First name" />
 
+                            </div>
 
+                            <div class="col-lg-4">
 
+                                <input type="text" class="form-control" name="lastName" placeholder="Last name" />
 
+                            </div>
 
+                        </div>
 
+
 
+                        <!--
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Username</label>
 
+                            <div class="col-lg-5">
 
+                                <input type="text" class="form-control" name="username" />
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Email address</label>
 
+                            <div class="col-lg-5">
 
+                                <input type="text" class="form-control" name="email" />
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Password</label>
 
+                            <div class="col-lg-5">
 
+                                <input type="password" class="form-control" name="password" />
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Retype password</label>
 
+                            <div class="col-lg-5">
 
+                                <input type="password" class="form-control" name="confirmPassword" />
 
+                            </div>
 
+                        </div>
 
+
 
+                        <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">Languages</label>
 
+                            <div class="col-lg-5">
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="languages[]" value="english" /> English
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="languages[]" value="french" /> French
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="languages[]" value="german" /> German
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="languages[]" value="russian" /> Russian
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="languages[]" value="other" /> Other
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+
 
+                        <div class="form-group">
 
+                            <label class="col-lg-3 control-label">Programming Languages</label>
 
+                            <div class="col-lg-5">
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="net" /> .Net
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="java" /> Java
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="c" /> C/C++
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="php" /> PHP
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="perl" /> Perl
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="ruby" /> Ruby
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="python" /> Python
 
+                                    </label>
 
+                                </div>
 
+                                <div class="checkbox">
 
+                                    <label>
 
+                                        <input type="checkbox" name="programs[]" value="javascript" /> Javascript
 
+                                    </label>
 
+                                </div>
 
+                            </div>
 
+                        </div>
 
+                        -->
 
+
 
+                        <div class="form-group">
 
+                            <div class="col-lg-9 col-lg-offset-3">
 
+                                <button type="submit" class="btn btn-primary">Sign up</button>
 
+                                <button type="button" class="btn btn-info" id="validateBtn">Manual validate</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: {
 
+                firstName: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The first name is required and cannot be empty'
 
+                        }
 
+                    }
 
+                },
 
+                lastName: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The last name is required and cannot be empty'
 
+                        }
 
+                    }
 
+                },
 
+                username: {
 
+                    message: 'The username is not valid',
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The username is required and cannot be empty'
 
+                        },
 
+                        stringLength: {
 
+                            min: 6,
 
+                            max: 30,
 
+                            message: 'The username must be more than 6 and less than 30 characters long'
 
+                        },
 
+                        regexp: {
 
+                            regexp: /^[a-zA-Z0-9_\.]+$/,
 
+                            message: 'The username can only consist of alphabetical, number, dot and underscore'
 
+                        },
 
+                        remote: {
 
+                            url: 'remote.php',
 
+                            message: 'The username is not available'
 
+                        },
 
+                        different: {
 
+                            field: 'password',
 
+                            message: 'The username and password cannot be the same as each other'
 
+                        }
 
+                    }
 
+                },
 
+                email: {
 
+                    validators: {
 
+                        emailAddress: {
 
+                            message: 'The input is not a valid email address'
 
+                        }
 
+                    }
 
+                },
 
+                password: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The password is required and cannot be empty'
 
+                        },
 
+                        identical: {
 
+                            field: 'confirmPassword',
 
+                            message: 'The password and its confirm are not the same'
 
+                        },
 
+                        different: {
 
+                            field: 'username',
 
+                            message: 'The password cannot be the same as username'
 
+                        }
 
+                    }
 
+                },
 
+                confirmPassword: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The confirm password is required and cannot be empty'
 
+                        },
 
+                        identical: {
 
+                            field: 'password',
 
+                            message: 'The password and its confirm are not the same'
 
+                        },
 
+                        different: {
 
+                            field: 'username',
 
+                            message: 'The password cannot be the same as username'
 
+                        }
 
+                    }
 
+                },
 
+                gender: {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'The gender is required'
 
+                        }
 
+                    }
 
+                },
 
+                'languages[]': {
 
+                    validators: {
 
+                        notEmpty: {
 
+                            message: 'Please specify at least one language you can speak'
 
+                        }
 
+                    }
 
+                },
 
+                'programs[]': {
 
+                    validators: {
 
+                        choice: {
 
+                            min: 2,
 
+                            max: 4,
 
+                            message: 'Please choose 2 - 4 programming languages you are good at'
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+        .on('error.form.bv', function(e) {
 
+            console.log('error');
 
+            // If you want to prevent the default handler (bootstrapValidator._onError)
 
+            // e.preventDefault();
 
+        })
 
+        .on('success.form.bv', function(e) {
 
+            console.log('success');
 
+            // If you want to prevent the default handler (bootstrapValidator._onSuccess)
 
+            // e.preventDefault();
 
+        });
 
+
 
+    // Validate the form manually
 
+    $('#validateBtn').click(function() {
 
+        $('#defaultForm').bootstrapValidator('validate');
 
+    });
 
+});
 
+</script>
 
+</body>
 
+</html>

+ 80 - 49
dist/js/bootstrapValidator.js
View File 

@@ -365,53 +365,16 @@
 
          * Called when all validations are completed
 
          * Called when all validations are completed
 
          */
 
          */
 
         _submit: function() {
 
         _submit: function() {
 
-            if (!this.isValid()) {
 
-                if ('submitted' == this.options.live) {
 
-                    // Enable live mode
 
-                    this.options.live = 'enabled';
 
-                    var that = this;
 
-                    for (var field in this.options.fields) {
 
-                        (function(f) {
 
-                            var fields  = that.getFieldElements(f);
 
-                            if (fields.length) {
 
-                                var type    = $(fields[0]).attr('type'),
 
-                                    event   = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $(fields[0]).get(0).tagName) ? 'change' : that._changeEvent,
 
-                                    trigger = that.options.fields[field].trigger || that.options.trigger || event,
 
-                                    events  = $.map(trigger.split(' '), function(item) {
 
-                                        return item + '.live.bv';
 
-                                    }).join(' ');
 
-
 
-                                for (var i = 0; i < fields.length; i++) {
 
-                                    $(fields[i]).off(events).on(events, function() {
 
-                                        that.validateFieldElement($(this));
 
-                                    });
 
-                                }
 
-                            }
 
-                        })(field);
 
-                    }
 
-                }
 
-
 
-                // Focus to the first invalid field
 
-                if (this.$invalidField) {
 
-                    this.$invalidField.focus();
 
-
 
-                    // Activate the tab containing the invalid field if exists
 
-                    var $tab = this.$invalidField.parents('.tab-pane'),
 
-                        tabId;
 
-                    if ($tab && (tabId = $tab.attr('id'))) {
 
-                        $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
-                    }
 
-                }
 
+            var isValid   = this.isValid(),
 
+                eventType = isValid ? 'success.form.bv' : 'error.form.bv',
 
+                e         = $.Event(eventType);
 
 
 
-                return;
 
-            }
 
+            this.$form.trigger(e);
 
 
 
-            // Call the custom submission if enabled
 
-            if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
 
-                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
 
-                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
 
-            } else {
 
-                this.disableSubmitButtons(true).defaultSubmit();
 
+            // Call default handler
 
+            // Check if whether the submit button is clicked
 
+            if (this.$submitButton) {
 
+                isValid ? this._onSuccess(e) : this._onError(e);
 
             }
 
             }
 
         },
 
         },
 
 
 
@@ -436,6 +399,77 @@
 
             return false;
 
             return false;
 
         },
 
         },
 
 
 
+        // --- Events ---
 
+
 
+        /**
 
+         * The default handler of error.form.bv event.
 
+         * It will be called when there is a invalid field
 
+         *
 
+         * @param {jQuery.Event} e The jQuery event object
 
+         */
 
+        _onError: function(e) {
 
+            if (e.isDefaultPrevented()) {
 
+                return;
 
+            }
 
+
 
+            if ('submitted' == this.options.live) {
 
+                // Enable live mode
 
+                this.options.live = 'enabled';
 
+                var that = this;
 
+                for (var field in this.options.fields) {
 
+                    (function(f) {
 
+                        var fields  = that.getFieldElements(f);
 
+                        if (fields.length) {
 
+                            var type    = $(fields[0]).attr('type'),
 
+                                event   = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $(fields[0]).get(0).tagName) ? 'change' : that._changeEvent,
 
+                                trigger = that.options.fields[field].trigger || that.options.trigger || event,
 
+                                events  = $.map(trigger.split(' '), function(item) {
 
+                                    return item + '.live.bv';
 
+                                }).join(' ');
 
+
 
+                            for (var i = 0; i < fields.length; i++) {
 
+                                $(fields[i]).off(events).on(events, function() {
 
+                                    that.validateFieldElement($(this));
 
+                                });
 
+                            }
 
+                        }
 
+                    })(field);
 
+                }
 
+            }
 
+
 
+            // Focus to the first invalid field
 
+            if (this.$invalidField) {
 
+                // Activate the tab containing the invalid field if exists
 
+                var $tab = this.$invalidField.parents('.tab-pane'),
 
+                    tabId;
 
+                if ($tab && (tabId = $tab.attr('id'))) {
 
+                    $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
+                }
 
+
 
+                this.$invalidField.focus();
 
+            }
 
+        },
 
+
 
+        /**
 
+         * The default handler of success.form.bv event.
 
+         * It will be called when all the fields are valid
 
+         *
 
+         * @param {jQuery.Event} e The jQuery event object
 
+         */
 
+        _onSuccess: function(e) {
 
+            if (e.isDefaultPrevented()) {
 
+                return;
 
+            }
 
+
 
+            // Call the custom submission if enabled
 
+            if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
 
+                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
 
+                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
 
+            } else {
 
+                this.disableSubmitButtons(true).defaultSubmit();
 
+            }
 
+        },
 
+
 
         // --- Public methods ---
 
         // --- Public methods ---
 
 
 
         /**
 
         /**
 
@@ -486,10 +520,7 @@
 
                 this.validateField(field);
 
                 this.validateField(field);
 
             }
 
             }
 
 
 
-            // Check if whether the submit button is clicked
 
-            if (this.$submitButton) {
 
-                this._submit();
 
-            }
 
+            this._submit();
 
 
 
             return this;
 
             return this;
 
         },
 
         },

File diff suppressed because it is too large
+ 2 - 2
dist/js/bootstrapValidator.min.js


+ 80 - 49
src/js/bootstrapValidator.js
View File 

@@ -364,53 +364,16 @@
 
          * Called when all validations are completed
 
          * Called when all validations are completed
 
          */
 
          */
 
         _submit: function() {
 
         _submit: function() {
 
-            if (!this.isValid()) {
 
-                if ('submitted' == this.options.live) {
 
-                    // Enable live mode
 
-                    this.options.live = 'enabled';
 
-                    var that = this;
 
-                    for (var field in this.options.fields) {
 
-                        (function(f) {
 
-                            var fields  = that.getFieldElements(f);
 
-                            if (fields.length) {
 
-                                var type    = $(fields[0]).attr('type'),
 
-                                    event   = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $(fields[0]).get(0).tagName) ? 'change' : that._changeEvent,
 
-                                    trigger = that.options.fields[field].trigger || that.options.trigger || event,
 
-                                    events  = $.map(trigger.split(' '), function(item) {
 
-                                        return item + '.live.bv';
 
-                                    }).join(' ');
 
-
 
-                                for (var i = 0; i < fields.length; i++) {
 
-                                    $(fields[i]).off(events).on(events, function() {
 
-                                        that.validateFieldElement($(this));
 
-                                    });
 
-                                }
 
-                            }
 
-                        })(field);
 
-                    }
 
-                }
 
-
 
-                // Focus to the first invalid field
 
-                if (this.$invalidField) {
 
-                    this.$invalidField.focus();
 
-
 
-                    // Activate the tab containing the invalid field if exists
 
-                    var $tab = this.$invalidField.parents('.tab-pane'),
 
-                        tabId;
 
-                    if ($tab && (tabId = $tab.attr('id'))) {
 
-                        $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
-                    }
 
-                }
 
+            var isValid   = this.isValid(),
 
+                eventType = isValid ? 'success.form.bv' : 'error.form.bv',
 
+                e         = $.Event(eventType);
 
 
 
-                return;
 
-            }
 
+            this.$form.trigger(e);
 
 
 
-            // Call the custom submission if enabled
 
-            if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
 
-                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
 
-                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
 
-            } else {
 
-                this.disableSubmitButtons(true).defaultSubmit();
 
+            // Call default handler
 
+            // Check if whether the submit button is clicked
 
+            if (this.$submitButton) {
 
+                isValid ? this._onSuccess(e) : this._onError(e);
 
             }
 
             }
 
         },
 
         },
 
 
 
@@ -435,6 +398,77 @@
 
             return false;
 
             return false;
 
         },
 
         },
 
 
 
+        // --- Events ---
 
+
 
+        /**
 
+         * The default handler of error.form.bv event.
 
+         * It will be called when there is a invalid field
 
+         *
 
+         * @param {jQuery.Event} e The jQuery event object
 
+         */
 
+        _onError: function(e) {
 
+            if (e.isDefaultPrevented()) {
 
+                return;
 
+            }
 
+
 
+            if ('submitted' == this.options.live) {
 
+                // Enable live mode
 
+                this.options.live = 'enabled';
 
+                var that = this;
 
+                for (var field in this.options.fields) {
 
+                    (function(f) {
 
+                        var fields  = that.getFieldElements(f);
 
+                        if (fields.length) {
 
+                            var type    = $(fields[0]).attr('type'),
 
+                                event   = ('radio' == type || 'checkbox' == type || 'file' == type || 'SELECT' == $(fields[0]).get(0).tagName) ? 'change' : that._changeEvent,
 
+                                trigger = that.options.fields[field].trigger || that.options.trigger || event,
 
+                                events  = $.map(trigger.split(' '), function(item) {
 
+                                    return item + '.live.bv';
 
+                                }).join(' ');
 
+
 
+                            for (var i = 0; i < fields.length; i++) {
 
+                                $(fields[i]).off(events).on(events, function() {
 
+                                    that.validateFieldElement($(this));
 
+                                });
 
+                            }
 
+                        }
 
+                    })(field);
 
+                }
 
+            }
 
+
 
+            // Focus to the first invalid field
 
+            if (this.$invalidField) {
 
+                // Activate the tab containing the invalid field if exists
 
+                var $tab = this.$invalidField.parents('.tab-pane'),
 
+                    tabId;
 
+                if ($tab && (tabId = $tab.attr('id'))) {
 
+                    $('a[href="#' + tabId + '"][data-toggle="tab"]').trigger('click.bs.tab.data-api');
 
+                }
 
+
 
+                this.$invalidField.focus();
 
+            }
 
+        },
 
+
 
+        /**
 
+         * The default handler of success.form.bv event.
 
+         * It will be called when all the fields are valid
 
+         *
 
+         * @param {jQuery.Event} e The jQuery event object
 
+         */
 
+        _onSuccess: function(e) {
 
+            if (e.isDefaultPrevented()) {
 
+                return;
 
+            }
 
+
 
+            // Call the custom submission if enabled
 
+            if (this.options.submitHandler && 'function' == typeof this.options.submitHandler) {
 
+                // If you want to submit the form inside your submit handler, please call defaultSubmit() method
 
+                this.options.submitHandler.call(this, this, this.$form, this.$submitButton);
 
+            } else {
 
+                this.disableSubmitButtons(true).defaultSubmit();
 
+            }
 
+        },
 
+
 
         // --- Public methods ---
 
         // --- Public methods ---
 
 
 
         /**
 
         /**
 
@@ -485,10 +519,7 @@
 
                 this.validateField(field);
 
                 this.validateField(field);
 
             }
 
             }
 
 
 
-            // Check if whether the submit button is clicked
 
-            if (this.$submitButton) {
 
-                this._submit();
 
-            }
 
+            this._submit();
 
 
 
             return this;
 
             return this;
 
         },
 
         },