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

我有以下登录表单:

<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 的响应，该 header 包含json对象，如下所示:

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

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

由于我不确定服务器在提交任何特定表单时可能会抱怨什么，是否有一种干净的方法来触发该字段的 bootstrap 验证程序实例上的错误状态并将服务器发送的错误消息注入(inject)该字段中显示的弹出窗口中那是错误的吗？

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

最佳答案

我只是有同样的问题。

看一眼:
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');
    })
});