Ненавязчивая проверка JavaScript в MVC 3, когда текстовое поле имеет значение по умолчанию

Question

Итак, у меня есть форма, хорошо работающая с MVC 3, DataAnnotations и ненавязчивым JavaScript.Однако я хочу поместить «водяной знак» в мои поля ввода, чтобы, например, текстовое поле «Имя» заполнялось значением «Имя» по умолчанию.Когда пользователь нажимает на него, значение исчезает, и если они покидают поле, ничего не вводя, снова появляется «Имя».Кроме того, у меня это реализовано и работает хорошо.

Мой вопрос связан с атрибутом [Required] свойства FirstName моей модели представления.Если пользователь отправляет форму, по умолчанию это поле содержит «Имя», поэтому оно проходит проверку «Обязательно».

Какой лучший способ справиться с этим ... Я думаю онесколько вариантов:

1) Внедрить некоторые jQuery до запуска ненавязчивой проверки JS, которая удаляет водяные знаки, чтобы при запуске проверки поля, в которых были заданы значения по умолчанию, были пустыми.Я не уверен, что это возможно.Можете ли вы как-то внедрить функцию до того, как ненавязчивый JS выполнит ее проверку?

2) Измените атрибут [Required] или создайте новый, чтобы принять значение по умолчанию, а затем сравните его, чтобы увидеть, совпадают ли они.В связи с этим возникает несколько проблем: у меня теперь есть значение по умолчанию, указанное в нескольких местах, одно в пользовательском интерфейсе, другое в коде, и это неправильно.

3) Создайте новый атрибут «Водяной знак», который я украшаюсвойство с этим указывает значение по умолчанию для этого поля.Создайте новый помощник HTML (вместо TextBoxFor), который ищет этот атрибут и выдает соответствующие атрибуты тегу.Измените или создайте новый атрибут [Обязательный], который ищет наличие [Водяной знак] в том же поле.Это сохраняет «значение по умолчанию» в одном месте и соответствует принципам СУХОГО, но мне кажется, что я помещаю элементы пользовательского интерфейса в код (водяные знаки являются чисто визуальными), и это также кажется слишком сложным решением для простой задачи..

Есть мысли?

Answer 1

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

Используйте атрибут-заполнитель HTML5 , а для браузеров, которые его поддерживают, вам больше не нужно это делать.

<input type="text" placeholder="First name" />

Для браузеров, которые не ...

На каждой странице есть сценарий совместимости для браузеров, которые не поддерживают определенные функции.В этом случае это немного JavaScript и jQuery, который определяет, поддерживает ли браузер атрибут placeholder.Если это не так, он устанавливает значение поля в качестве значения заполнителя, устанавливает стиль и добавляет соответствующие обработчики событий focus / blur.Обработчики событий focus / blur устанавливают значение поля соответствующим образом.

Затем в скрипте проверки клиента убедитесь, что значение поля не равно значению заполнителя.

В вашем случае это будет означать изменение вашего поляненавязчивая проверка JS для проверки значения поля не равно значению заполнителя

Answer 2

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