Javascript 如何在文本输入事件模糊时手动触发引导验证_Javascript_Jquery_Twitter Bootstrap

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

javascript jquery twitter-bootstrap

Javascript 如何在文本输入事件模糊时手动触发引导验证,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我正在为我的应用程序使用引导验证如果用户在文本输入“如何显示验证消息”下输入“abc”，则不允许输入值这是我的密码 $('#taginsertform').bootstrapValidator( { feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove',

我正在为我的应用程序使用引导验证

如果用户在文本输入“如何显示验证消息”下输入“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 
  }

});

在下面的JSFIDLE中，在文本输入下输入abc时，如何显示消息？

您可以在模糊上附加错误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();
  }
});

$（“#recipientname”）.blur（函数（）{
var recipientnameval=$（“#recipientname”）.val（）；
recipientnameval=recipientnameval.toLowerCase（）；
var errorDiv=“请插入有效数据”
如果（recipientnameval==='abc'）
{
$（'.form group'）.append（errorDiv）；
}否则{
$（'.form error'）.remove（）；
}
});

祝您好运：）

您可以在blur上附加error 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();
  }
});

$（“#recipientname”）.blur（函数（）{
var recipientnameval=$（“#recipientname”）.val（）；
recipientnameval=recipientnameval.toLowerCase（）；
var errorDiv=“请插入有效数据”
如果（recipientnameval==='abc'）
{
$（'.form group'）.append（errorDiv）；
}否则{
$（'.form error'）.remove（）；
}
});

祝您好运：）

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

引导只提供默认的样式和功能。为了验证

元素

，我们调用

checkValidity（）

JavaScript方法

如果您遵循，那么我们可以使用以下代码段完成

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

当当前元素失去焦点时，此示例将在当前元素上设置

有效

或

无效

类。注意：我们将事件侦听器分配给所有

输入、选择、文本区域

，所有形式的

类都需要验证

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

哎呀