在ajax查询的结果上添加并触发引导验证器

Adding and triggering a bootstrapvalidator on result from ajax query

本文关键字:验证 添加 查询 ajax 结果      更新时间:2023-09-26

我有以下登录表单:

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

引导验证器初始化如下:

    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标头的响应,该标头包含一个json对象,如下所示:

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

我在访问标题中的数据时没有问题,我真的在寻找引导验证选项,以便在表单发布后将验证附加到表单元素。

由于我不确定服务器可能会对任何特定的表单提交抱怨什么,是否有一种干净的方法可以触发字段的引导验证程序实例上的错误状态,并将服务器发送的错误消息注入出现在错误字段上的popover中?

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

我刚刚遇到了同样的问题。

看看:http://bootstrapvalidator.com/api/#update-状态

示例:

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