Вставка элемента в шаблон ошибки плагина jQuery Validation - PullRequest
Новая
       7

Вставка элемента в шаблон ошибки плагина jQuery Validation

1 голос
/ 13 января 2011

Я использую для своей формы плагин jQuery Validation . Это позволяет вам изменить errorElement и обернуть errorElement, используя опцию wrapper . Но я хочу вставить элемент в errorElement следующим образом:

<label class="error"><em></em>Error message goes here</label>

Есть ли простой способ вставить тег em ?


Я попытался добавить тэг em с помощью опции errorPlacement (см. Ниже), но, похоже, плагин заменяет содержимое errorElement после этого. 

$.validator.setDefaults({
    errorPlacement: function(error, element) {
        error.prepend('<em/>');
        error.insertBefore(element);
    }
});


Я также попытался добавить тег em с помощью опции showErrors (см. Ниже). Опять же, похоже, что плагин заменяет содержимое errorElement впоследствии. 

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        for (var i = 0; i < errorList.length; i++) {
            var error = errorList[i],
                $label = this.errorsFor(error.element),
                $element = $(error.element);

            if ($label.length && $label.find('em').length == 0) {
                $label.prepend('<em/>');
            }
        }

        this.defaultShowErrors();
    }
});


Я также попытался изменить плагин, чтобы при создании элемента error добавлялся тег . Это работает до тех пор, пока я не сконцентрируюсь на элементе формы с ошибкой, после чего тег em будет удален. (Это происходит потому, что проверка jQuery постоянно обновляет содержимое элемента error, когда я фокусируюсь и / или печатаю в поле, поэтому при создании элемента error добавляется мой тег em .)

Ответы [ 3 ]

7 голосов
/ 15 января 2011

Вы можете использовать функцию showErrors, чтобы настроить отображение ошибок: 

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        if (errorList.length < 1) {
            // clear the error if validation succeeded
            $('label.error').remove();
            return;
        }
        $.each(errorList, function(index, error) {
            $(error.element).next('label.error').remove();
            $(error.element).after(
                $('<label/>')
                    .addClass('error')
                    .append($('<em/>').text('this is some em'))
                    .append(error.message)
            );
        });
    }
});

Вы можете увидеть его в действии здесь .

5 голосов
/ 21 июня 2013

Я попробовал решение Дарина, но столкнулся с двумя проблемами:

  • При наличии нескольких полей сообщения об ошибках не были правильно удалены, когда поля стали действительными.
  • Я не мог использовать обратный вызов success, чтобы изменить метку ошибки на метку 'Ok'

Я получил следующий код, который изменяет сообщение об ошибке перед вызовом поведения по умолчанию с помощью defaultShowErrors

$('#my_form').validate({
    showErrors: function(errorMap, errorList) {
    var i, elements;
    for(i = 0; errorList[i]; i++) {
        errorList[i].message = "<em> " + errorList[i].message + "</em>"
    }
    this.defaultShowErrors()    
    }
});
0 голосов
/ 15 января 2011

Я на самом деле решил эту проблему, изменив плагин, но приму любое опубликованное (эффективное) решение, которое не включает его изменение.

Я добавил две новые опции: appendToError и prependToError к плагину. Все, что указано в этих параметрах, всегда будет добавляться или добавляться в элементе ошибки.

https://github.com/simshaun/jquery-validation/commit/bff7ba55d1d60ee0bac033989256a932185e7a97

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

...