Html.ValidationMessageFor с изображением и подсказкой

Question

С тех пор, как я уже стучаю головой, он пробовал все идеи (nooby или нет), но, похоже, я не могу заставить его работать.

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

То, что я пытался до сих пор:

@Html.ValidationMessageFor(Function(m) m.Password, Nothing, New With {.class = "ValWarn"}) 

CSS:

.ValWarn {content: url(images/Warning.png);margin: 0.1em;} 

Результат: image 1

Проблема: Я не могу назначить сообщение Validation своему названию.

Test # 20357

<div id="divhiddenval" style="display: none;"> 
     @Html.ValidationMessageFor(Function(m) m.Password) 
    </div> 
    @Html.PasswordFor(Function(m) m.Password) 
    <div id="valdiv_@Html.IdFor(Function(m) m.Password)" style="display: inline;"></div> 

Javascript:

$(document).ready(function() { 
     fullValidation(); 
     $('form').submit(function() { 
      if (! $(this).valid()) { 
       fullValidation(); 
       return false; 
      } 
     }); 
      $('input').keydown(function() { 
       singleValidation(this.id); 
       tooltip(); 
      }); 

     }); 


     function singleValidation(_id) { 
      var _err = $("span[data-valmsg-for='" + _id + "']"); 

      if ($(_err).text() != "") { 
       $("#valdiv_" + $(_err).attr("data-valmsg-for")).html("<span class='ValWarn tooltip' title='<span class=&quot;warncolor&quot;>" + $(_err).text() + "</span>'></span>"); 

      } else { 
       $("#valdiv_" + $(_err).attr("data-valmsg-for")).html(""); 
      } 
     } 

     function fullValidation() { 
      $("#divhiddenval span[data-valmsg-for]").each(function() { 
       singleValidation($(this).attr("data-valmsg-for")); 
      }) 
      tooltip(); 
     } 

Результат: shows tooltip on hover

Проблема: Это своего рода излишеством назвать всплывающую подсказку() каждый раз. Также он не работает при первом нажатии клавиши. Он работает, когда я выхожу из ввода и снова перехожу к типу. поэтому нажатие клавиши не срабатывает, пока не потеряет фокус один раз.

Следующая попытка: Я нашел где-то в Интернете подтверждение ValidationHTMLMessageFor Extension. довольно близко, но до сих пор ... Мое приложение глобализовано, поэтому я должен был бы добавить изображение перед каждым resourcestring, так как для dataanotations он принимает только статические строки. Также проблема с подсказкой не будет исправлена ​​с этим.

Так что вообще ... Я не могу думать о каком-либо другом методе, который работал бы так, как я этого хочу. С другой стороны, я не могу поверить, что Microsoft делает это так трудно стиль Validationmessages нашей собственной :(

Если кто-то пожалуйста, может мне помочь с этой проблемой?

Answer 1

ИТАК часть проблемы в том, что ValidateMessageFor возвращает элемент span, содержащий сообщение об ошибке, указанное в вашей модели, вместо этого я бы попытался использовать ValidateFor. ValidateFor не вернет сообщение об ошибке, прикрепленное к модели, но будет сигнализировать о том, что проверка не удалась для поля, к которому оно привязано, отличный кандидат на уведомление, которое вы хотите представить пользователю.

Убедитесь, что у вас есть клиентский сертификат ионный и ненавязчивый javascript, включенный в ваш web.config вместе с правильными файлами javascript, включены в представление.

web.конфиг

<appSettings> 
    <add key="ClientValidationEnabled" value="true" /> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
</appSettings> 

Javascript

~/Scripts/jquery-1.7.1.min.js 
~/Scripts/jquery.validate.min.­js 
~/Scripts/jquery.validate.unob­trusive.min.js 

Вот приличная ссылка на аналогичном использовании вы пытаетесь осуществить, но с помощью ValidateFor

Я забыл добавить, что метод, который я объяснил бы сделать проверку ненавязчиво, не имея необходимости «подавать» форму. Вы также можете получить желаемый результат таким же образом, отправив форму с помощью ValidateFor, чтобы отметить вашу проверку с ошибками, а затем использовать jQuery для доступа к данным для класса ошибки ввода-валидации и атрибута data-val для сообщения об ошибке вашего подсказка.