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

问题描述 投票:0回答:2

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

javascript jquery twitter-bootstrap
2个回答
1
投票

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

祝你好运:)


0
投票

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

Bootstrap简单地为默认的HTML input typesHTML input attributesJavaScript 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-validis-invalid类。请注意,我们使用类input,select,textarea为所有形式的所有needs-validation分配事件侦听器。

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

的nJoy!

© www.soinside.com 2019 - 2024. All rights reserved.