bootstrapValidator 使用中,由于字段检查等原因,致使提交按钮失效。如何重新启用提交按钮呢?
最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。
下面一句代码可以实现启用提交按钮:
下面记录一下使用中学习到的相关API,不定期更新。
$('#loginForm').bootstrapValidator('disableSubmitButtons', false);
1. 获取validator对象或实例
下面看下Bootstrap中点击后禁用按钮的最佳方法
一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:
为了防止在Bootstrap中点击按钮多次提交,所以希望点击按钮后禁用按钮。
1)
具体实现方法如下:
// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
//禁用button
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually functionally
//禁用类型为button的input按钮
$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually functionally
//禁用超链接
$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually
这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。
将上面方法写入点击事件中即可,如:
2)
$(".btn-check").click(function () {
$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually functionally
});
$(form).bootstrapValidator(methodName, parameters);
js按钮点击后几秒内不可用
这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
两种方式的使用分别如下:
function timer(time) {
var btn = $("#sendButton");
btn.attr("disabled", true); //按钮禁止点击
btn.val(time <= 0 ? "发送动态密码" : ("" (time) "秒后可发送"));
var hander = setInterval(function() {
if (time <= 0) {
clearInterval(hander); //清除倒计时
btn.val("发送动态密码");
btn.attr("disabled", false);
return false;
}else {
btn.val("" (time--) "秒后可发送");
}
}, 1000);
}
//调用方法
timer(30);
// The first way
$(form)
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday');
// The second one
$(form)
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');
以上所示是小编给大家介绍的bootstrapValidator 重新启用提交按钮的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
2. defaultSubmit()
使用默认的提交方式提交表单,调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。
使用:
$('#defaultForm').bootstrapValidator({
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can't be empty'
}
}
}
},
submitHandler: function(validator, form, submitButton) {
// a)
// Use Ajax to submit form data
//$.post(form.attr('action'), form.serialize(), function(result) {
// ... process the result ...
//}, 'json');
//b)
// Do your task
// ...
// Submit the form
validator.defaultSubmit();
}
});
3. disableSubmitButtons(boolean)
启用或禁用提交按钮。BootstrapValidator里默认的提交按钮是所有表单内的type属性值为submit的按钮,即[type="submit"]。
使用:
当登录失败时,重新启用提交按钮。
$('#loginForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
$.post(form.attr('action'), form.serialize(), function(result) {
// The result is a JSON formatted by your back-end
// I assume the format is as following:
// {
// valid: true, // false if the account is not found
// username: 'Username', // null if the account is not found
// }
if (result.valid == true || result.valid == 'true') {
// You can reload the current location
window.location.reload();
// Or use Javascript to update your page, such as showing the account name
// $('#welcome').html('Hello ' result.username);
} else {
// The account is not found
// Show the errors
$('#errors').html('The account is not found').removeClass('hide');
// Enable the submit buttons
$('#loginForm').bootstrapValidator('disableSubmitButtons', false);
}
}, 'json');
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
4. enableFieldValidators(field, enabled)
启用或禁用指定字段的所有校验。这里我的实
验结果是如果禁用了校验,好像对应的字段输入(文本框、下拉等)也会变为禁用。
使用:
本文由美洲杯赔率发布于计算机教程,转载请注明出处:bootstrapValidator男篮世界杯赔率 重新启用提交按钮