Question

我正在使用Bootstrap Validator插件来验证我的表单，并且我正在尝试在成功验证表单时发出警报。

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');
                         }
                     },
                 }
             }
         }
   });

我已根据此https://github.com/nghuuphuoc/bootstrapvalidator/issues/195

尝试了此操作

我的表单正在验证，但它没有提醒成功的消息。我该如何正确提醒？

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

Answer 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();
    }
});

Bootstrap Validator - 成功验证警报

2 个答案: