jQuery validate - отображать сообщение об ошибке в текстовом поле

Question

Я создаю простую форму для своего клиента, и они хотят отобразить сообщение об ошибке в текстовом поле. Можно ли добиться этого с помощью плагина JQuery's Validation?

Спасибо!

Answer 1

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

$("#yourtextfield").val("This field can't be empty."); 

Answer 2

Да, вы можете. Ваши навыки кажутся очень сырыми.

Давайте рассмотрим простой путь, потому что ваш вопрос звучит просто. При ошибке дайте условие для назначения строки сообщения как значения для поля ввода.

что-то вроде

var err = "err_msg";

$('#elementId').val(err);

Смотрите раздел .val('value') на цитату http://api.jquery.com/val/

Answer 3

OP:

«Они хотят отобразить сообщение об ошибке в текстовом поле. Будет ли это можно добиться с Validation плагин JQuery в?»

Да. Это возможно Использование errorPlacement функции обратного вызова/опции плагина.

НЕТ, я никогда не сделал бы это. Это делает практически невозможным правильное взаимодействие пользователя с формой. Ошибка уничтожает любые данные, которые пользователь уже ввел, и пользователь должен удалить текст сообщения, чтобы ввести свои данные. Я уверен, что вы можете думать о умных способах для решения этих проблем, но IMO, это очень плохой дизайн с точки зрения пользовательского интерфейса. Покажите своему клиенту this demo, затем прокрутите вниз и покажите им my second demo.

DEMO: http://jsfiddle.net/6fUTV/

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // rules & options, 
     errorPlacement: function(error, element) { 
      element.val(error.text()); 
     } 
    }); 

}); 

---

EDIT: Вместо того, чтобы вы могли использовать атрибут placeholder. Сообщение будет по-прежнему внутри входного элемента, но оно не будет отображаться как value, поэтому оно не будет мешать взаимодействию с пользователем. Однако, большой недостаток этого подхода заключается в том, что если у вас есть правило для проверки формата данных, такого как email, minlength и т. Д., Пользователь никогда не увидит сообщение о проверке, потому что есть значение, находящееся внутри поля на вершина заполнителя!

errorPlacement: function(error, element) { 
    element.attr("placeholder", error.text()); 
} 

DEMO 2: http://jsfiddle.net/n5saemj7/

---

Альтернативы:

Показать ошибки с помощью сообщение пузыри: http://jsfiddle.net/kyK4G/

Больше информации: How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

Answer 4

Они сказали вам, что это плохой метод, может быть, так оно и есть.

Но вы можете использовать заполнитель, вместо того, чтобы заменить содержимое уже, просто изменить:

errorPlacement: function(error, element) { 
    element.val(error.text()); 
} 

Для этого:

errorPlacement: function(error, element) { 
    element.attr("placeholder",error.text()); 
} 

Надежда, которая помогла вам, берегите себя!