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

Question

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

如果用户在文本输入下输入“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 input types、HTML input attributes 和JavaScript constraints validation 功能提供样式。为了验证element，我们调用了checkValidity() JavaScript 方法。

如果您关注BootStrap Form Validation documentation，那么我们可以使用以下sn-p 完成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 类。请注意，我们将事件侦听器分配给所有具有 needs-validation 类的所有形式的 input,select,textarea。

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

开心！

Answer 2

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

祝你好运:)

Answer 3

在表单中添加一个id作为formId

var formEl = $("#formId");

formEl.find('input,select,textarea').on('focusout', function () {

    var thisEl = $(this).parent();
    if(!thisEl.hasClass('was-validated')){
        thisEl.addClass('was-validated');
    }

});