Как не отображать элемент ошибки как метку с плагином jquery.validation

Question

Хорошо, ребята,

Я прочитал все остальные посты и вопросы о плагине jQuery Validation, и у них, похоже, нет того, что я ищу.

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

Вот только некоторые из форм:

<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, который выплевывает плагин? Я пробовал это, но не пошел.

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

Спасибо!

Answer 1

Все эти решения кажутся более сложными, чем они должны быть. Вот простое решение. .error добавлено в недопустимые поля по умолчанию. Итак, первое, что нам нужно сделать, это стилизовать его, чтобы он изменил границу и фон на разные оттенки красного:

.error {
    border-color: #cd0a0a !important;
    background: #fef1ec !important;
}

Тогда в вашем JavaScript:

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

Опция errorPlacement - это то, как плагин validate позволяет вам переопределить способ размещения сообщения об ошибке. В этом случае мы просто заставляем его ничего не делать, и поэтому сообщение об ошибке не создается.

Answer 2

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

1. Я создал два класса стилей CSS "errorHighlight" и "textinput", вот так:

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

2. Во время разработки я применил класс textinput к своим полям ввода текста: <input type="text" class="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");
               }
           });
   

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

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

Answer 3

Попробуйте:

$(function() {
    $("#donate_form").validate({
        errorPlacement: $.noop
    });
});

Answer 4

Вы можете извлечь только сообщение об ошибке в errorPlacement: и добавить его ко всему, что вам нравится, например так:

errorPlacement: function(error, element) {
    $('#error-div').html(error[0].innerHTML)//<-error[0].innerHTML is the error msg.
} 

Answer 5

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

jQuery.validator.messages.required = '';

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

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

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