如何在文本输入事件模糊时手动触发 BootStrap 验证

Question

我正在为我的 Application 使用 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/

Answer 1

简而言之，没有内置的引导程序功能来进行验证。

Bootstrap 只是为默认HTML 输入类型、HTML 输入属性和JavaScript 约束验证功能提供样式。为了验证element我们调用checkValidity()JavaScript 方法。

如果您遵循BootStrap 表单验证文档，那么我们可以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。

如果您希望触发不同类型的通知，则可以应用相同的通知。

欢乐！