Hướng dẫn bootstrap form validation on blur - xác thực biểu mẫu bootstrap trên mờ

Tôi đang sử dụng xác thực bootstrap cho ứng dụng của mình.

Trong trường hợp nếu người dùng nhập "ABC" trong đầu vào văn bản Cách hiển thị thông báo xác thực, giá trị đã nhập không được phép

Đây là mã của tôi

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

});

Trong phần dưới đây, khi nhập ABC theo đầu vào văn bản làm thế nào tôi có thể hiển thị một tin nhắn? http://jsfiddle.net/xmrxbl9f/97/

Hỏi ngày 12 tháng 12 năm 2016 lúc 12:02Dec 12, 2016 at 12:02

Nói tóm lại, không có chức năng bootstrap tích hợp để thực hiện xác nhận.

BootStrap chỉ đơn giản là cung cấp các kiểu cho các loại đầu vào HTML mặc định, các thuộc tính đầu vào HTML và chức năng xác thực ràng buộc JavaScript. Để xác nhận element, chúng tôi gọi phương thức JavaScript checkValidity().

Nếu bạn đang theo dõi tài liệu xác thực biểu mẫu bootstrap thì chúng tôi có thể thực hiện xác thực sự kiện onblur với đoạn trích sau đây.

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

Ví dụ này sẽ đặt lớp is-valid hoặc is-invalid trên phần tử hiện tại khi nó mất tập trung. Lưu ý rằng chúng tôi đang gán cho người nghe sự kiện cho tất cả input,select,textarea dưới mọi hình thức với lớp

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

Nếu bạn muốn kích hoạt một loại thông báo khác, có thể được áp dụng giống nhau.

nJoy!

Đã trả lời ngày 16 tháng 3 năm 2019 lúc 10:59Mar 16, 2019 at 10:59

nickl-nickl-nickl-

8.0644 Huy hiệu vàng41 Huy hiệu bạc54 Huy hiệu đồng4 gold badges41 silver badges54 bronze badges

Bạn có thể nối các lỗi div lỗi trên Blur. Hãy thử nó nếu nó phù hợp với yêu cầu của bạn.

 $( "#recipientname" ).blur(function() {

  var recipientnameval = $("#recipientname").val();

 recipientnameval = recipientnameval.toLowerCase();
 var errorDiv = "
Please Insert valid data
"
 if(recipientnameval==='abc')
  {
   $('.form-group').append(errorDiv);
  }else{
   $('.form-error').remove();
  }
});

May mắn nhất :)

Đã trả lời ngày 12 tháng 12 năm 2016 lúc 12:13Dec 12, 2016 at 12:13

Manoj Lodhimanoj LodhiManoj Lodhi

9784 Huy hiệu bạc10 Huy hiệu đồng4 silver badges10 bronze badges

1

Thêm ID vào biểu mẫu dưới dạng 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');
    }

});

sbgib

5.4303 Huy hiệu vàng18 Huy hiệu bạc25 Huy hiệu Đồng3 gold badges18 silver badges25 bronze badges

Đã trả lời ngày 8 tháng 12 năm 2020 lúc 8:33Dec 8, 2020 at 8:33

Làm thế nào để bạn xác nhận trên Blur?

Làm thế nào để bạn xác nhận một biểu mẫu?

Làm cách nào để hiển thị một lĩnh vực cần thiết trong bootstrap?

Xác thực bootstrap là gì?