Как отобразить сообщение об ошибке проверки jqueryui в jqueryui tooltip

Question

Я следую this tutorial, чтобы отобразить ошибки проверки в подсказке jqueryui. Проверка отлично работает, но я не в состоянии отобразить правильные сообщения об ошибках, как правильные атрибуты не могут быть условно связан с подсказкой, согласно моему примеру ниже:

$(document).tooltip({ 
     items: ".input-validation-error", 
     content: function() { 

      //debugger; 
      return $(this).attr('data-val-required'); 
     } 
    }); 

только будет отображаться сообщение требуемой ошибки поля по этой логике, есть ли способ расширить эту логику, нажав на результаты проверки (для удаленной проверки и сравнения типов), или я попал в тупик?

Answer 1

Поскольку функция content() вызывается по требованию, вы можете предоставить любой текст, который вам нужен, на основе атрибутов this, который является элементом, о котором идет речь.

Вам необходимо проверить элемент и вернуть текст для ошибки проверки. Что-то вроде:

$(document).tooltip({ 
    items: ".input-validation-error", 
    content: function() { 

     //debugger; 
     return $(this).attr('data-val-required') || 
       $(this).attr('data-val-date') || 
       $(this).attr('data-val-number'); // etc etc 
    } 
}); 

Это вернет атрибут проверки данных, который заполняется сообщением об ошибке.

Answer 2

Использования в tutorial ссылается на исходном вопрос, изменение линии 4 от:

@{ Html.ValidateFor(m => m.UserName); } 

к:

@Html.ValidationMessageFor(m => m.Username, null, new {style="visibility:hidden"}) 

Затем измените функцию контента следующим образом:

$(document).tooltip({ 
    items: ".input-validation-error", 
    content: function() { 
     return $("[data-valmsg-for='" + $(this).attr('id') + "']").text(); 
    } 
}); 

По существу, мы не хотим, чтобы оригинальное отображение ValidationMessageFor span (видимость = h idden). Мы просто используем его как контейнер для всплывающей подсказки.