我正在为我的应用程序使用Bootstrap验证。
如果用户在文本输入下输入“abc”如何显示验证消息,则不允许输入值
这是我的代码
$('#taginsertform').bootstrapValidator(
{
feedbackIcons:
{
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
recipientname:
{
feedbackIcons: 'false',
validators:
{
notEmpty:
{
message: 'Reciepnt Name cannot be empty'
}
}
}
}
}).on('success.form.bv', function(e)
{
e.preventDefault();
addTagSbmt();
});
function addTagSbmt()
{
$('#taginsertform').bootstrapValidator('resetForm', true);
$('.closemodal').trigger('click');
return false;
}
$('#myModal').on('shown.bs.modal', function()
{
$('#taginsertform').bootstrapValidator('resetForm', true);
});
$( "#recipientname" ).blur(function() {
var recipientnameval = $("#recipientname").val();
recipientnameval = recipientnameval.toLowerCase();
if(recipientnameval==='abc')
{
alert(recipientnameval);
// fire bootstrap valdation as invalid data
}
});
在下面的jsfiddle中,在文本输入下输入abc后如何显示消息? http://jsfiddle.net/xmrxbL9f/97/
您可以在模糊上附加错误div。如果它符合您的要求,请尝试它。
$( "#recipientname" ).blur(function() {
var recipientnameval = $("#recipientname").val();
recipientnameval = recipientnameval.toLowerCase();
var errorDiv = "<div class='form-error alert alert-danger fade in'>Please Insert valid data<div>"
if(recipientnameval==='abc')
{
$('.form-group').append(errorDiv);
}else{
$('.form-error').remove();
}
});
祝你好运:)
简而言之,没有内置的引导功能来进行验证。
Bootstrap简单地为默认的HTML input types,HTML input attributes和JavaScript constraints validation功能提供样式。为了验证element
,我们称之为checkValidity()
JavaScript方法。
如果您正在关注BootStrap Form Validation documentation,那么我们可以使用以下代码段完成onblur
事件验证。
$(function () { // jQuery ready
// On blur validation listener for form elements
$('.needs-validation').find('input,select,textarea').on('focusout', function () {
// check element validity and change class
$(this).removeClass('is-valid is-invalid')
.addClass(this.checkValidity() ? 'is-valid' : 'is-invalid');
});
});
此示例将在当前元素失去焦点时设置is-valid
或is-invalid
类。请注意,我们使用类input,select,textarea
为所有形式的所有needs-validation
分配事件侦听器。
如果您希望触发不同类型的通知,则可以应用相同的通知。
的nJoy!