Bootstrap Validator - 成功验证警报答案

【问题标题】：Bootstrap Validator - Alert on success validationBootstrap Validator - 成功验证警报
【发布时间】：2014-12-02 14:21:30
【问题描述】：

我正在使用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>

    $('#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试过了

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

【问题讨论】：

onSuccess 应该与validators 处于同一级别，而不是像您那样在其中。该字段的所有验证都成功，而不是特定类型。

标签： jquery html validation jqbootstrapvalidation

【解决方案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>

【讨论】：

您想要在提交前还是立即发出警报？
我想在提交时提醒。我试过上面的代码，它不起作用
我把所有脚本都放了，它对我有用。您必须添加一个提交按钮

【解决方案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();
    }
});

【讨论】：