Как не отобразить ошибочный элемент как маркировку с jquery.validation плагином

Хорошо парни,

Я прочитал все другие сообщения и вопрос на плагине Проверки jQuery, и они, кажется, не имеют то, что я надеюсь делать.

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

Вот просто часть формы:

<form id="donate_form" name="checkoutForm" method="post">
    <label class="desc" id="title0" for="billing_name_first">
    Name
    <span id="req_1" class="req">*</span>
</label>
<div>
    <span class="left">
        <input name="billing.name.first" id="billing_name_first" type="text" class="field text required" value="" tabindex="1" />
        <label for="billing_name_first">First</label>
    </span>
    <span class="right">
        <input name="billing.name.last" id="billing_name_last" type="text" class="field text required" value="" tabindex="2" />
        <label for="billing_name_last">Last</label>
    </span>
</div>

Я предполагаю, что должен поместить класс, требуемый во вход??

Затем с CSS скрываются label.error который выложен плагином? Я попробовал это, но никакие не идут.

Я смотрю в правильном месте?

Спасибо!

11
задан cdmckay 3 January 2013 в 18:58
поделиться

2 ответа

Я понимаю, чего вы пытаетесь достичь; У меня были те же требования, но у меня были серьезные трудности с их достижением, но я справился. Вот как:

  1. Я создал два класса стилей CSS «errorHighlight» и «textinput», например:

    .errorHighlight {border: 2px solid # CC0000; } .textinput {border: 1px silver solid;}

  2. Во время разработки я применил класс "textinput" к своим полям ввода текста:

  3. И затем в моих настройках плагина проверки формы jQuery внутри моего файла Javascript,Я добавил следующие общие настройки проверки для всех форм на этой странице:

      $. Validator.setDefaults ({
    errorPlacement: function (error, element) {
     $ (element) .attr ( {"title": error.text ()}); 
    }, 
    highlight: function (element) {
     //$(element).css({"border " : "2px solid # CC0000"}); 
     $ (element) .removeClass ("textinput"); 
     $ (element) .addClass ("errorHighlight"); 
    } , 
    unhighlight: function (element) {
     //$(element).css({"border ":" 2px solid # CC0000 "}); 
     $ (element) .removeClass ("errorHighlight"); 
     $ (element) .addClass ("textinput"); 
    } 
    }); 
     

Теперь, когда поле не проходит проверку, для элемента вызывается функция обратного вызова « выделить ». Функция обратного вызова « errorPlacement » предотвращает действие по умолчанию по вставке метки после ошибочного поля ввода, вместо этого она добавляет сообщение об ошибке в атрибут поля « title » (который может использоваться в качестве источника текста для отображения всплывающей подсказки).

Надеюсь, это поможет.

17
ответ дан 3 December 2019 в 00:53
поделиться

Я не знаю, правильный ли это способ, но мы используем:

jQuery.validator.messages.required = '';

Это подавляет сообщения об ошибках и оставляет границы ввода.

На самом деле, документация jQuery Plugin указывает на пример, который делает это, так что я полагаю, это общепринятый метод...

Индивидуальное отображение сообщений: Не отображаются сообщения для требуемого метода, только для ошибок типа (например, неправильный формат электронной почты); Вверху отображается резюме ("Вы пропустили 12 полей. Они были выделены ниже.")

1
ответ дан 3 December 2019 в 00:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: