Bootstrap Validator - Alert on success validation

Question

Bootstrap Validator - Alert on success validation

12.2k views Asked by Body At 02 December 2014 at 14:21

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

<form id="defaultForm" 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 class="btn btn-sm">Add</button>
</form>

JS

    $('#defaultForm').bootstrapValidator({
         live: 'enabled',

         fields: {
             name: {
                 validators: {
                     notEmpty: {
                         message: 'The Evenr Name is required and cannot be empty',

                         onSuccess: function(e, data) {
                            alert('Success');
                         }
                     },
                 }
             }
         }
   });

I've tried this according to this https://github.com/nghuuphuoc/bootstrapvalidator/issues/195

My form is validating but its not alerting the message on success. How can I alert it properly?

Original Q&A

There are 2 answers

**Michael** · Answer 1 · 2014-12-02 14:40:41

    <!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>

**zawhtut** · Answer 2 · 2015-03-17 09:13:29

    $('#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();
    }
});

TechQA.

Bootstrap Validator - Alert on success validation

There are 2 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in VALIDATION

Related Questions in JQBOOTSTRAPVALIDATION

Popular Questions

Popular Tags

Trending Questions