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

Question

I am using Bootstrap validation for my Application .

Incase if user enters "abc" under text input how to show a validation message , Entered value is not allowed

This is my code

$('#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 
  }

});

In the below jsfiddle , upon entering abc under text input how can i show a message ? http://jsfiddle.net/xmrxbL9f/97/

Answer 1

In short, no there is no built in bootstrap functionality to do the validation.

Bootstrap simply provides styles to the default HTML input types , HTML input attributes and JavaScript constraints validation functionality. In order to validate an element we call the checkValidity() JavaScript method.

If you are following the BootStrap Form Validation documentation then we can accomplish an onblur event validation with the following snippet.

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

This example will set the is-valid or is-invalid class on the current element when it looses focus. Note we are assigning event listeners to all input,select,textarea in all forms with the class needs-validation .

If you wish to trigger a different type of notification the same can be applied.

nJoy!

Answer 2

You can append the error div on blur. Try it if it matches your requirement.

 $( "#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();
  }
});

Best of luck :)

Answer 3

Add an id to the form as 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');
    }

});