Skip to content Skip to sidebar Skip to footer
Home / Html / Jqbootstrapvalidation / Jquery / Validation

Bootstrap Validator - Alert On Success Validation

Post a Comment
I'm using Bootstrap Validator plugin to validate my form and I'm trying to do an alert when the form is successfully validated. HTML

Solution 1: 

    <!DOCTYPE html>
    <html>
    <head>
        <title>BootstrapValidator demo</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/bootstrap/css/bootstrap.css"/>
        <link rel="stylesheet" href="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/dist/css/bootstrapValidator.css"/>

        <script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/jquery/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/dist/js/bootstrapValidator.js"></script>
    </head>
    <body>
    <form id="defaultForm" method="post" role="form">
         <div class="form-group">
              <label for="eventName">Event Name</label>
              <input type="text" class="input-sm form-control" id="eventName" name="name[]" placeholder="...">
         </div>
         <button type="button" class="btn btn-default btn-sm addButton" data-template="textbox">Add</button>
         <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>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#defaultForm')
                .bootstrapValidator({
                    live: 'enabled',
                    fields: {
                        'name[]': {
                            validators: {
                                notEmpty: {
                                    message: 'The textbox field is required'
                                }
                            }
                        }
                    },
                    onSuccess: function(e, data) {
                        //this section before submit
                        alert('Success');
                    }
                });
        });
    </script>
    </body>
    </html>

Solution 2: 

    $('#yourForm').bootstrapValidator({
    button: {
        selector: '[type="submit"]',
    },
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    live: 'enabled',
    fields: {
        recipient_mail: {
            validators: {
                notEmpty: {
                    message: 'This field is required'
                },
                emailAddress: {
                    message: 'Mail Adress in invalid format'
                }
            }
        }
    },
    submitHandler: function(validator, form, submitButton) {
        alert("Your alert come here");
        validator.defaultSubmit();
    }
});

Post a Comment for "Bootstrap Validator - Alert On Success Validation"