Cách sử dụng cửa sổ bật lên Twitter Bootstrap cho các thông báo xác thực jQuery?

Tôi có thể làm cho cửa sổ bật lên xuất hiện bằng cách sử dụng bootstrap đủ dễ dàng và tôi cũng có thể thực hiện xác thực bằng cách sử dụng plugin xác thực jQuery tiêu chuẩn hoặc công cụ xác thực jQuery , nhưng tôi không thể tìm ra cách đưa cái này vào cái kia.

Tôi nghĩ những gì tôi cần là một số móc nối được trình xác thực gọi khi nó muốn hiển thị một thông báo, cung cấp cho nó một nút đóng để chuyển thông báo và phần tử đích đến một cửa sổ bật lên. Đây có vẻ như là một kiểu tiêm thuốc phụ thuộc.

Tất cả đều tốt về mặt lý thuyết, nhưng tôi không thể tìm ra cái móc đó ở đâu, hoặc thậm chí nếu cái móc đó tồn tại trong cả hai công cụ xác thực. Cả hai đều có vẻ có ý định chịu trách nhiệm hiển thị thông báo với tất cả các loại tùy chọn phức tạp về vị trí, trình bao bọc, kiểu khi tất cả những gì tôi theo đuổi là (các) loại lỗi (tôi thậm chí không nhất thiết cần văn bản thông báo) và yếu tố nó liên quan đến. Tôi đã tìm thấy các móc cho toàn bộ biểu mẫu, không phải các thông báo riêng lẻ.

Tôi thích các hệ thống xác thực sử dụng các lớp để xác định các quy tắc, vì chúng hoạt động tốt với các biểu mẫu được tạo động.

Bất cứ ai có một giải pháp hoặc một ý tưởng tốt hơn?

Hãy xem các tùy chọnhighlight và showErrors jQuery Validator , những tùy chọn này sẽ cho phép bạn tạo ra các lỗi tùy chỉnh nổi bật của riêng bạn để kích hoạt cửa sổ bật lên Bootstrap.

Đây là một ví dụ thực tế:

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

Nó không thực sự sử dụng bootstrap popover, nhưng nó trông thực sự đẹp và dễ dàng đạt được.

CẬP NHẬT

Vì vậy, để xác thực cửa sổ bật lên, bạn có thể sử dụng mã này:

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

Bạn nhận được một cái gì đó như thế này:

Kiểm tra jsFiddle .

Chris Fulstow đã nói đúng, nhưng tôi vẫn mất một lúc, vì vậy tôi tìm thấy mã hoàn chỉnh:

Điều này hiển thị cửa sổ bật lên về lỗi và ẩn các nhãn lỗi mặc định:

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

Điều này thiết lập cửa sổ bật lên. Điều duy nhất bạn cần từ đây là trình kích hoạt: 'thủ công'

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

Thuộc tính tiêu đề và nội dung được chuyển vào cửa sổ bật qua không hoạt động, vì vậy tôi đã chỉ định chúng nội tuyến trong đầu vào #password của tôi với data-content = 'Tối thiểu 5 ký tự' và data-original-title = 'Mật khẩu không hợp lệ'. Bạn cũng cần rel = 'popover' trong biểu mẫu của mình.

Điều này hoạt động, nhưng cửa sổ bật lên nhấp nháy khi không chọn. Bất cứ ý tưởng làm thế nào để khắc phục điều đó?

Dưới đây là một gợi ý tuyệt vời từ Varun Singh giúp ngăn chặn vấn đề "nhấp nháy" của việc xác thực liên tục cố gắng "hiển thị" mặc dù cửa sổ bật lên đã xuất hiện. Tôi chỉ đơn giản là đã thêm một mảng trạng thái lỗi để nắm bắt phần tử nào đang hiển thị lỗi và phần tử nào không. Hoạt động như một sự quyến rũ!

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

Phần mở rộng jQuery này dành cho Plugin jQuery Validation (được thử nghiệm với phiên bản 1.9.0) sẽ thực hiện thủ thuật.

https://github.com/tonycoco/rails_template/blob/master/files/assets/javascripts/jquery.validate.bootstrap.js

Điều này cũng bổ sung trong một số thông báo lỗi Rails-esk.

Tôi thích thay đổi CSS của bootstrap hơn. Chỉ cần thêm các lớp của jQuery validate vào đúng vị trí. trường-xác thực-lỗi và đầu vào-xác thực-lỗi

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

Đây là cách tôi đã làm với Bootstrap 2.x và jQuery Validate 1.9

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

Vui lòng xem phần sau:
- https://gist.github.com/3030983
Tôi nghĩ đó là cách đơn giản nhất.

BIÊN TẬP

Mã từ liên kết:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});

Cảm ơn rất nhiều vì những người đứng đầu! Đây là phiên bản của tôi cho Bootstrap nhưng với Tooltips. Theo tôi nó thanh lịch hơn popover. Tôi biết câu hỏi dành cho cửa sổ bật lên vì vậy vui lòng không bỏ phiếu vì lý do này. Có lẽ ai đó sẽ thích nó theo cách này. Tôi thích khi tôi đang tìm kiếm thứ gì đó và tôi đã tìm thấy những ý tưởng mới trên Stackoverflow. Lưu ý: không cần đánh dấu trên biểu mẫu.

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    }); 

Đây là cách tôi làm cho nó xảy ra. Nhưng nó liên quan đến việc thực hiện 2 thay đổi đối với tập lệnh xác thực (Tôi đã nhận mã cho bootstrap 1.4 tại đây và sau đó sửa đổi nó - http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin- for-twitter-bootstrap / )

Cuộc gọi của tôi để xác thực:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

Sau đó, bạn cần thay đổi 2 thứ trong jquery.validate.js
1. áp dụng bản sửa lỗi này - https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. Sau dòng 647 (trong hàm showLabel, tạo phần nhãn ) sau dòng .addClass(this.settings.errorClass)thêm dòng: .addClass("help-inline")
Ai đó có thể tìm cách áp dụng bản sửa lỗi thứ hai trong hàm xác thực, nhưng tôi không tìm ra cách nào, vì showLabel được gọi sau khi đánh dấu.

Đây là những gì tôi đưa vào xác thực của mình để tuân thủ các nguyên tắc của Twitter Bootstrap. Thông báo xác thực lỗi được đặt trong a <span class=help-inline>và chúng tôi muốn đánh dấu vùng chứa bên ngoài dưới dạng errorhoặc success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

Đây là cập nhật cho câu trả lời xuất sắc của Kenny Meyer ở trên . Có một số vấn đề ngăn cản nó hoạt động đối với tôi mà tôi đã giải quyết trong đoạn mã này:

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

Không chắc liệu điều này có liên quan đến cuộc thảo luận hay không vì người đăng ban đầu đã yêu cầu móc để hiển thị / ẩn cửa sổ bật lên bootstrap.

Tôi đang tìm kiếm xác thực đơn giản và các cửa sổ bật lên không thành vấn đề. Một bài đăng có liên quan và bài đầu tiên trong kết quả tìm kiếm của google đã được đánh dấu là trùng lặp với câu hỏi này. Vì vậy, thật hợp lý khi đề cập đến jqValidation JS tuyệt vời này của @ ReactiveRaven, được gọi là jqBootstrapValidation, hoạt động tốt với Twitter Bootstrap. Quá trình thiết lập chỉ mất vài phút. Tải về tại đây .

Hy vọng điều này làm tăng giá trị.

tl; dr tránh cần liệt kê các cửa sổ bật lên rõ ràng bằng cách sử dụng bản đồ băm để lưu trữ id của các phần tử và tạo các cửa sổ bật lên một cách nhanh chóng (cách tiếp cận của Jeffrey Gilbert và Kenny Meyer kết hợp với nhau).

Đây là cách của tôi, khắc phục sự cố chập chờn được đề cập bởi những người khác, nhưng không giống như câu trả lời của @Jeffrey Gilbert, không sử dụng danh sách ( errorStates) mà sử dụng bản đồ lỗi . Bản đồ băm FTW. Tôi nghĩ rằng tôi nhớ mình đã đọc ở đâu đó rằng mọi vấn đề trong CS đều có thể được giải quyết bằng một bản đồ băm :)

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

Cảm ơn tất cả những người khác đã đăng ý tưởng về điều này.

Kiểm tra cái này: https://github.com/mingliangfeng/jquery.validate.bootstrap.popover

Nó chỉ ra cách sử dụng Bootstrap popover css, thay vì JS. Phương thức JS bật lên sẽ gây ra sự cố nhấp nháy.

Nếu sử dụng mã Kenny Meyer ở trên cho cửa sổ bật lên, hãy lưu ý rằng các quy tắc kiểm tra nội dung của trường nhưng không bắt buộc, chẳng hạn như URL hợp lệ sẽ khiến cửa sổ bật lên không biến mất khi xóa trường. Xem onkeyup bên dưới để biết giải pháp. Nếu ai có giải pháp tốt hơn, xin vui lòng đăng.

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }