0 Câu hỏi: Đặt xác minh của riêng tôi ở nơi khác ngoài quy tắc Đối tượng [trùng lặp]

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi muốn sử dụng plugin Tooltipster để hiển thị các lỗi biểu mẫu được tạo bởi Plugin Xác thực jQuery .

jQuery để xác thực plugin :

$(document).ready(function () {

    $('#myform').validate({ // initialize jQuery Validate
        // other options,
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

jQuery cho plugin Tooltipster :

$(document).ready(function () {

    $('.tooltip').tooltipster({ /* options */ });  // initialize tooltipster

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <br/>
    <input type="submit" />
</form>

Tôi sẽ tích hợp việc sử dụng hai plugin jQuery này như thế nào để các lỗi xác thực xuất hiện bên trong các chú giải công cụ?

    
19
2 Câu trả lời                              2                         

Giải pháp cho các phiên bản Tooltipster 2.1, 3.0, & 4.0 được bao gồm trong câu trả lời này.

LƯU Ý rằng .tooltipster() chỉ được đính kèm với phần tử type="text" input trong các ví dụ của tôi dưới đây. Nếu form của bạn có chứa các loại yếu tố nhập dữ liệu khác, chẳng hạn như type="radio", type="date", textarea, 060035099111111010010111111 Nếu không, mọi thứ sẽ thất bại với lỗi.

Tooltipster v2.1

Trước tiên, hãy khởi chạy plugin Tooltipster ( với bất kỳ tùy chọn nào ) trên tất cả ạnh> select cụ thể sẽ hiển thị lỗi:

.tooltipster()

Thứ hai, hãy sử dụng Tùy chọn nâng cao của Tooltipster cùng với form

$(document).ready(function () {

    // initialize tooltipster on form input elements
    $('#myform input[type="text"]').tooltipster({ 
        trigger: 'custom', // default is 'hover' which is no good here
        onlyOne: false,    // allow multiple tips to be open at a time
        position: 'right'  // display the tips to the right of the element
    });

});
các hàm gọi lại được tích hợp trong plugin Xác thực success:

Bản trình diễn hoạt động: http://jsfiddle.net/2DUX2

EDIT : Mã được cập nhật để tận dụng các tính năng API Tooltipster mới được phát hành trong phiên bản 2.1 vào ngày 2/12/13

CẬP NHẬT cho Tooltipster v3.0

Tooltipster 3.0 không hoạt động và như vậy không hoạt động giống như minh họa ở trên. Các mã sau đây cung cấp một ví dụ cập nhật. Phiên bản này có thêm lợi ích là không gọi Tooltipster trên mỗi lần nhấn phím khi thông báo chưa thay đổi.

( Đừng quên rằng bạn vẫn cần đính kèm errorPlacement: với các yếu tố

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            $(element).tooltipster('update', $(error).text());
            $(element).tooltipster('show');
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});
có liên quan như minh họa ở trên. )

.tooltipster()

DEMO bằng cách sử dụng Tooltipster v3.0: jsfiddle.net/2DUX2/3/

CẬP NHẬT cho Tooltipster v4.0

Lưu ý rằng tùy chọn input đã bị xóa khỏi phiên bản 4.0 của plugin Tooltipster.

Tôi cũng đã thay thế cuộc gọi lại

$(document).ready(function () {

    // initialize validate plugin on the form
    $('#myform').validate({
        // any other options & rules,
        errorPlacement: function (error, element) {
            var lastError = $(element).data('lastError'),
                newError = $(error).text();

            $(element).data('lastError', newError);

            if(newError !== '' && newError !== lastError){
                $(element).tooltipster('content', newError);
                $(element).tooltipster('show');
            }
        },
        success: function (label, element) {
            $(element).tooltipster('hide');
        }
    });

});
bằng onlyOne. Trên các trường "tùy chọn", thông báo lỗi không bao giờ bị xóa khi trường này sau đó bị xóa ... Vấn đề này không bị cô lập đối với Tooltipster phiên bản 4, tuy nhiên đoạn mã sau giải quyết nó tiến về phía trước. success

DEMO bằng Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/

    
40
2018-05-03 22: 08: 44Z
  1. Tôi đang cố gắng sử dụng JS của bạn nhưng tôi gặp lỗi này và không biết làm thế nào để giải quyết nó vì tôi mới biết về JS: TypeError: $(...). xác thực không phải là một hàm  submitHandler: function (form) {//cho bản demo
    2013-06-26 20: 18: 27Z
  2. @ starbucks, có vẻ như bạn đã quên bao gồm mã cho plugin Xác thực jQuery.
    2013-06-26 20: 56: 30Z
  3. @ starbucks, Nhấp vào liên kết này và duyệt các câu trả lời khác của tôi để tìm thứ tương tự. Nếu không, vui lòng đọc Câu hỏi thường gặp và đăng câu hỏi mới, vì phần nhận xét không phải là nơi dành cho các vấn đề /câu hỏi mới.
    2013-06-26 21: 02: 26Z
  4. @ Sparky Câu hỏi tuyệt vời và câu trả lời hay hơn nữa !! Thật không may, tôi không thể làm cho nó hoạt động với các điều khiển được tạo động: (
    2013-10-07 03: 50: 36Z
  5. @ eddy, tôi xin lỗi bạn đang gặp vấn đề nhưng đánh cắp nhận xét về câu trả lời của câu hỏi khác không phải là cách thích hợp để yêu cầu trợ giúp ở đây. Vui lòng gửi một câu hỏi hoàn toàn mới như tôi đã nêu.
    2013-10-07 14: 00: 41Z

Câu trả lời của Sparky đã là một yếu tố chính trong xác thực trang web của tôi, nhưng việc nâng cấp lên Tooltipster 4 yêu cầu một số thay đổi. Đây là cách tôi giúp tôi làm việc và với một vài cải tiến.

Trên các trang của bạn, bao gồm css tooltipster và css chủ đề trong phần đầu (và bất kỳ css chủ đề nào mà bạn phân lớp các chủ đề của chúng như được mô tả trên trang của nó).

unhighlight

Ngoài ra, bạn cần bao gồm tệp javascript của tooltipster. Bạn cũng sẽ cần javascript xác thực jquery.

success

Bây giờ, trong một tệp javascript khác hoặc trong một số thẻ tập lệnh, bạn sẽ cần đặt mã xác thực cũng như mã công cụ của bạn. Đây là một từ một trang web tôi có, những thay đổi từ câu trả lời của Sparky nằm ở đầu.

// initialize Tooltipster on text input elements
$('input[type="text"]').tooltipster({ //find more options on the tooltipster page
    trigger: 'custom', // default is 'hover' which is no good here
    position: 'top',
    animation: 'grow'
});

// initialize jQuery Validate
$("#myform").validate({
    errorPlacement: function (error, element) {
        var ele = $(element),
            err = $(error),
            msg = err.text();
        if (msg != null && msg !== '') {
            ele.tooltipster('content', msg);
            ele.tooltipster('open');
        }
    },
    unhighlight: function(element, errorClass, validClass) {
        $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
    },
    rules: {
        ....

Bây giờ khi bạn nhập nội dung nào đó vào trường vi phạm một trong các quy tắc được liệt kê, một cửa sổ bật lên xuất hiện phía trên hộp cho biết những gì jquery-verifyate nói là sai. Nó cũng sẽ không mở một tin nhắn nếu không có gì trong đó để hiển thị cho người dùng (điều này sẽ dẫn đến việc nó mở một tooltip trống và sau đó đóng ngay lập tức, trông có vẻ kỳ lạ).

    
2
2016-09-29 16: 28: 20Z
  1. Tại sao nên sử dụng
    <link rel="stylesheet" type="text/css" href="/styles/tooltipster.bundle.css">
    <link rel="stylesheet" type="text/css" href="/styles/tooltipster/sideTip/themes/tooltipster-sideTip-light.min.css">
    
    khi bạn chỉ cần xem
    <script src="/js/tooltipster.bundle.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
    
    ?
    2016-09-29 16: 30: 49Z
  2. Trong
    $(document).ready(function(){
    
        $('#form input[type="text"]').tooltipster({ //find more options on the tooltipster page
            trigger: 'custom', // default is 'hover' which is no good here
            onlyOne: false,    // allow multiple tips to be open at a time
            position: 'top',
            animation: 'grow', 
            theme: ['tooltipster-light'] //put your themes here
        });
    
        //form validation initialization
        $("#form").validate({
            errorPlacement: function (error, element) {
                if (error[0].innerHTML != null && error[0].innerHTML !== "") {
                    $(element).tooltipster('content', $(error).text());
                    $(element).tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
                }
            },
            success: function (label, element) {
                var obj = $(element);
                if (obj.hasClass('tooltipstered') && obj.hasClass('error')) {
                    $(element).tooltipster('close'); //hide no longer works in v4, must use close
                }   
            },
            rules: {
                // your rules
                ......
            }
        });
    
    });
    
    của bạn, nếu error[0].innerHTML, thì tại sao không sử dụng $(error).text()?
    2016-09-29 16: 34: 06Z
  3. Cũng lưu ý rằng tùy chọn success đã bị xóa khỏi Tooltipster.
    2016-09-29 17: 12: 46Z
  4. Tôi đã chỉnh sửa câu trả lời của mình để kết hợp giải pháp của bạn với tôi bao gồm cả jsFiddle. Cảm ơn bạn đã đăng câu trả lời của bạn.
    2016-09-29 17: 17: 30Z
  5. Giải pháp này xử lý lỗi tooltipster trong ví dụ Sparky khi nhập kiểu! = text (ví dụ: ngày).
    2016-12-27 23: 16: 01Z
var obj = $(element)
nguồn đặt đây