在ajax查询的结果上添加并触发引导验证器
Adding and triggering a bootstrapvalidator on result from ajax query
我有以下登录表单:
<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');
})
});
相关文章:
- jQuery工具验证器自定义效果-添加&消除影响
- javascript中添加验证电子邮件的问题
- 在验证器中添加自定义规则以检查<ul>具有元素
- jQuery验证器添加方法未定义
- 添加@javascript标记时,Cucumber中的HTTP身份验证失败
- 如何将此验证添加到表单中
- 通过javascript向表单动态添加验证
- 为什么 MVC4 验证 js 自动将数字验证添加到日期时间
- 我将 javascript 验证添加到我的登录控件中,尽管存在错误
- 如何将电话号码和电子邮件验证添加到Kendo-UI Grid
- 将自定义验证添加到角度文本区域
- simpleCart(js)将表单输入验证添加到电子邮件结账提交中
- 表单验证-添加/删除Jquery动态添加的内容
- 向Facebook身份验证添加两个URL
- 向验证添加输入
- 我的jquery验证添加方法密码规则的问题
- 使用Jquery验证添加自定义错误消息
- 如何最好地将客户端验证添加到这两个字段中
- 将 JavaScript 最小长度验证添加到文本字段
- 向Javascript验证添加警报