0 Вопрос: Положите мою собственную проверку в другом месте, чем правила Object [duplicate]

вопрос создан в Wed, May 8, 2019 12:00 AM

Я хотел бы использовать плагин Tooltipster для отображения ошибок формы, генерируемых Модуль проверки jQuery .

jQuery для валидации плагина :

$(document).ready(function () {

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

});

Плагин jQuery для 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>

Как бы я интегрировал использование этих двух плагинов jQuery, чтобы во всплывающих подсказках появлялись ошибки валидации?

    
19
2 ответа                              2                         

Решения для Tooltipster версий 2.1, 3.0 и & 4.0 включены в этот ответ.

ПРИМЕЧАНИЕ , что .tooltipster() привязан только к элементу type="text" input в моих примерах ниже. Если form содержит другие виды входных данных элементов, таких как type="radio", type="date", textarea, select и т.д., то должен настроить селектор соответственно или создать дополнительные экземпляры .tooltipster() для этих других элементов. В противном случае все закончится ошибкой.

Tooltipster v2.1

Сначала инициализируйте плагин Tooltipster ( с любыми параметрами ) в всех конкретные элементы 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
    });

});

Во-вторых, используйте дополнительные параметры Tooltipster вместе с success: и errorPlacement: функции обратного вызова, встроенные в плагин Validate , для автоматического отображения и скрытия подсказок следующим образом:

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

});

Рабочая демонстрация: http://jsfiddle.net/2DUX2

РЕДАКТИРОВАТЬ . Обновлен код для использования преимуществ новых функций API Tooltipster, выпущенных в версии 2.1 12.12.13

ОБНОВЛЕНИЕ для Tooltipster v3.0

Tooltipster 3.0 отсутствует и поэтому не работает так, как показано выше. Следующий код предоставляет обновленный пример. Эта версия имеет дополнительное преимущество: она не вызывает Tooltipster при каждом нажатии клавиши, когда сообщение еще не изменилось.

( Не забудьте, что вам все еще нужно прикрепить .tooltipster() к соответствующим элементам input, как показано выше. )

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

});

DEMO с использованием Tooltipster v3.0: jsfiddle.net/2DUX2/3/ сильный> р>

ОБНОВЛЕНИЕ для Tooltipster v4.0

Обратите внимание, что опция onlyOne была удалена из версии плагина Tooltipster версии 4.0.

Я также заменил обратный вызов success на unhighlight. В «необязательных» полях сообщение об ошибке никогда не удалялось, когда поле впоследствии было отключено ... это потому, что функция success не срабатывает при этих обстоятельствах. Эта проблема не изолирована от Tooltipster версии 4, однако следующий код решает эту проблему.

// 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: {
        ....

ДЕМО с помощью Tooltipster v4.0: https://jsfiddle.net/h5grrrr9/ сильный> р>     

40
2018-05-03 22: 08: 44Z
  1. Я пытаюсь использовать ваш JS, но получаю эту ошибку и не уверен, как ее исправить, поскольку я новичок в JS: TypeError: $(...). validate не является функцией  submitHandler: function (form) {//для демонстрации
    2013-06-26 20: 18: 27Z
  2. @ starbucks, похоже, вы забыли включить код для плагина jQuery Validate.
    2013-06-26 20: 56: 30Z
  3. @ starbucks, нажмите эту ссылку и просмотрите мои другие ответы на что-то похожее. В противном случае, не стесняйтесь прочитать FAQ и опубликовать новый вопрос, поскольку в разделе комментариев нет места для новых проблем /вопросов.
    2013-06-26 21: 02: 26Z
  4. @ Sparky Отличный вопрос и даже лучший ответ !! :) К сожалению, я не могу заставить его работать с динамически созданными элементами управления: (
    2013-10-07 03: 50: 36Z
  5. @ eddy, извините, у вас возникли проблемы, но перехват комментариев к ответу на другой вопрос не является правильным способом обратиться за помощью здесь. Пожалуйста, опубликуйте новый вопрос, как я уже говорил.
    2013-10-07 14: 00: 41Z

Ответ Спарки был одним из основных элементов проверки моего сайта, но обновление до Tooltipster 4 потребовало некоторых изменений. Вот как я получил свою работу, и с некоторыми улучшениями.

На своих страницах укажите css для всплывающих подсказок и css темы в разделе head (и любые css темы, с которыми вы подклассируете их темы, как описано на его странице).

<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">

Кроме того, вам нужно включить файл javascript подсказки. Вам также понадобится javascript для проверки jquery.

<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>

Теперь, в другом файле javascript или в некоторых тегах сценария, вам нужно будет поместить свой код проверки, а также код всплывающей подсказки. Вот один из моих веб-страниц, изменения от ответа Спарки находятся вверху.

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

});

Теперь, когда вы вводите что-то в поле, которое нарушает одно из перечисленных правил, над окном появляется всплывающее окно с сообщением о том, что jquery-validate говорит, что это неправильно. Он также не откроет сообщение, если в нем нет ничего, чтобы показать пользователю (что привело бы к открытию пустой всплывающей подсказки, а затем к немедленному закрытию, что выглядит странно).

    
2
2016-09-29 16: 28: 20Z
  1. Зачем использовать error[0].innerHTML, когда вы можете просто посмотреть на $(error).text()?
    2016-09-29 16: 30: 49Z
  2. В вашем success, если var obj = $(element), то почему бы не использовать obj.tooltipster('close')?
    2016-09-29 16: 34: 06Z
  3. Также обратите внимание, что опция onlyOne была удалена из Tooltipster.
    2016-09-29 17: 12: 46Z
  4. Я отредактировал свой ответ, чтобы включить ваше решение в мое, включая jsFiddle. Спасибо, что опубликовали свой ответ.
    2016-09-29 17: 17: 30Z
  5. Это решение устраняет ошибку всплывающей подсказки в примере Sparky при вводе типа! = текст (например, дата).
    2016-12-27 23: 16: 01Z
источник размещен Вот