javascript - 在 ajax 查询的结果上添加和触发 bootstrapvalidator

Question

我有以下登录表单:

<form accept-charset="utf-8" class="form-horizontal" id="login_form" action="/login.json" method="POST" data-validate="true">
<div class="content">
    <h4 class="title">Login to AppName</h4>
    <div class="form-group">
        <div class="col-sm-12">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" placeholder="Username" id="username" name="username" class="form-control"
                       required data-bv-notempty-message="Username must not be empty."
                       maxlength="255" data-bv-stringlength-message="Username cannot exceed 255 characters.">
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-12">
            <div class="input-group">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" placeholder="Password" id="password" name="password" class="form-control" required data-bv-notempty-message="Username must not be empty." maxlength="255" data-bv-stringlength-message="Username cannot exceed 255 characters.">
            </div>
        </div>
    </div>
</div>
<div class="foot">
    <button class="btn btn-primary" data-dismiss="modal" type="submit"><span class="fa fa-user"> </span> Log me in</button>
</div>

bootstrapvalidator 初始化如下:

    var oScope = $(oForm).is('form') ? oForm.parent() : null;
    $('form[data-validate="true"]', oScope).bootstrapValidator({
        container: 'popover',
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        feedbackIcons: {
            valid:      'glyphicon glyphicon-ok',
            invalid:    'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        live: 'enabled'
    }).on('success.form.bv', function(e) {
        // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var oForm = $(e.target);
        oForms.submitForm(e, oForm);
    });

定义的验证工作正常，可以毫无问题地提交表单。

如果处理表单的服务器端脚本遇到错误(密码无效、登录尝试次数过多等)，它会发送一个包含自定义 X-App-Whatever header 的响应，其中包含一个 json 对象，如下所示:

{
    "errors":{
         "username":[
             "Your username is invalid."
         ]
     },
 }

我在访问标题中的数据时没有问题，我真的在寻找用于在发布表单后将验证附加到表单元素的 Bootstrap 验证选项。

因为我不确定服务器在任何特定表单提交时可能会提示什么，是否有一种干净的方法来触发字段的 Bootstrap 验证器实例上的错误状态并将服务器发送的错误消息注入(inject)出现的弹出窗口在错误的字段上？

我不确定远程验证是否是正确的选择，因为它要求在表单中预定义验证类型。

Answer 1

我刚遇到同样的问题。

看看: http://bootstrapvalidator.com/api/#update-status

例子:

$form.bootstrapValidator({
    fields: { 
        email: {
            validators: {
                notEmpty: {
                    message: 'Please enter email'
                },
                emailAddress: {
                    message: 'Invalid email'
                },
                callback: {
                    message: "The email address doesnt exist or is inactive"
                }
            }
        }
    }
})
.on('success.form.bv', function(e) {
   .preventDefault();

    var $form = $(e.target);
    var bv = $form.data('bootstrapValidator');

    $.post($form.attr('action'), $form.serialize())
    .success( function(msg) { 
        // great success
     })
    .fail( function(xhr, status, error) {
        bv.updateStatus('email', 'INVALID', 'callback');
    })
});