Скрытие содержимого при ненавязчивой проверке jQuery

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

Проблема в том, что у меня не так много места для сообщений проверки поля формы, которые отображаются рядом с каждой формой, и если я помещу их под поля формы, изменение размера будет уродливым. Вот как выглядит типичное поле формы:

Стандартное поле формы

Когда я нажимаю на поле, отображается следующее:

Поле формы с показанным текстом справки

И когда происходит проверка, происходит следующее:

Поле формы с показанной проверкой

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

Мой javascript разделен на несколько файлов, например:

/Review/Create/ — использует createReview.js /Review/Read/ — использует readReview.js

Оба они также включают «shared.js». Я надеялся, что смогу расширить плагин ненавязчивой проверки jquery в файле shared.js и применить его ко всем формам на сайте за один раз... но я немного растерялся. Это насколько я понял:

$("form").validate({
    invalidHandler: function (form, validator) {
        hideDescriptions();
    }
});

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

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


person Spikeh    schedule 11.02.2012    source источник
comment
К сведению: я нашел эту ссылку (и заменил submitHandler на invalidHandler), но, похоже, она не срабатывает? stackoverflow.com/questions/4747017/   -  person Spikeh    schedule 11.02.2012


Ответы (2)


Потратив 20 минут на написание этого, я нашел эту ссылку, которая в значительной степени решает мою проблему. Вот код, который я использовал:

$("form").bind("invalid-form.validate", function () {
    hideDescriptions();
});

Однако это почти бесполезно, так как всякий раз, когда пользователь снова щелкает поле, отображается описание!

Ричард также поднял правильный вопрос - я пересмотрю то, как работают мои формы :)

person Spikeh    schedule 11.02.2012

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

Вы можете указать расположение меток ошибок, вы можете, например, поместить метку ошибки рядом с заголовком поля ввода и поместить тире между ними. Таким образом, вы сохраните описание, и оно не будет перекрываться.

person Richard    schedule 11.02.2012
comment
Вы правы - и, как говорится в моем ответе, в любом случае это только создало больше проблем! Мне нужно посмотреть, как я вывожу ошибки проверки. К сожалению, я не могу поместить сообщение проверки рядом с отображаемым текстом, так как некоторые поля имеют довольно длинные описания. Возможно, мне придется стиснуть зубы и положить их под :| В конце концов, это всего лишь небольшое изменение CSS. - person Spikeh; 11.02.2012
comment
это просто «обычный» плагин проверки jQuery? Посмотрите 'errorPlacement' здесь docs.jquery.com/Plugins/Validation/validate - person Richard; 11.02.2012
comment
В любом случае убедитесь, что стиль поля ввода изменяется при возникновении ошибки. Ошибка класса должна быть добавлена ​​к элементу, поэтому укажите ее, например. красная рамка - person Richard; 11.02.2012
comment
Да, просто стандартный валидатор jquery. Спасибо за это - посмотрю ссылку. Однако класс «ошибка», похоже, не добавляется при возникновении ошибки? - person Spikeh; 11.02.2012
comment
OK, ошибка проверки ввода добавляется, но не ко всем элементам. Я использую автозаполнение пользовательского интерфейса JQuery для одного поля, и, похоже, оно не меняется с действительного на ошибку проверки ввода. - person Spikeh; 11.02.2012
comment
Не ко всем элементам? Вы имеете в виду не все элементы, вызывающие ошибку? Странно... Ты уверен? А вы уверены, что валидация настроена правильно? - person Richard; 11.02.2012
comment
Ну а все остальные поля работают нормально (я добавил вокруг них красную рамку). Поле проверяется нормально, отображается сообщение об ошибке, но класс не применяется. Выходной HTML-код выглядит следующим образом (используется плагин автозаполнения JQuery UI): = истинный стиль = цвет: RGB (0, 0, 0); › - person Spikeh; 11.02.2012
comment
Ага! Не обращайте на меня внимания... Я знал, что происходит что-то смешное. Текстовое поле не привязано к модели - скрытое поле. Поле автозаполнения обновляет скрытое поле :) - person Spikeh; 12.02.2012