Скриване на съдържание при ненатрапчиво валидиране на 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
FYI – намерих тази връзка (и замених 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, input-validation-error се добавя, но не към всички елементи. Използвам функцията за автоматично довършване на потребителския интерфейс на JQuery в едно поле и не изглежда да се променя от валидна на грешка при валидиране на въвеждане. - person Spikeh; 11.02.2012
comment
Не към всички елементи? Имате предвид не всички елементи, които причиняват грешка? Това е странно... Сигурен ли си? И сигурни ли сте, че тогава проверката е настроена правилно? - person Richard; 11.02.2012
comment
Е, всички други полета работят добре (добавих червена рамка около тях). Полето се проверява добре, съобщението за грешка се показва, но класът не се прилага. Изходният HTML е както следва (използва приставката за потребителски интерфейс JQuery за автоматично довършване): ‹input id=Medium name=Medium type=text value= class=ui-autocomplete-input autocomplete=off role=textbox aria-autocomplete=list aria-haspopup =истински стил=цвят: rgb(0, 0, 0); › - person Spikeh; 11.02.2012
comment
Аха! Игнорирайте ме... Знаех, че се случва нещо смешно. Текстовото поле не е обвързано с модела - има скрито поле. Полето за автоматично попълване актуализира скритото поле :) - person Spikeh; 12.02.2012