Проверка ASP.NET MVC с использованием плагина qTip jQuery

Question

Я использую найденное решение здесь , чтобы показать ошибки проверки на стороне клиента во всплывающей подсказке с использованием плагина qTip jQuery. Это решение прекрасно работает для проверки на стороне клиента, но мне бы хотелось, чтобы ошибки на стороне сервера отображались таким же образом. Кто-нибудь знает, как показать ошибки проверки на стороне сервера во всплывающих подсказках, использующих qTip?

Спасибо

Answer 1

Если есть ошибка проверки на стороне сервера, при загрузке страницы будет элемент span с классом 'field-validation-error', поэтому мы можем просто зациклить все элементы с этим классом, извлечь содержимое или сообщение об ошибке и отобразите его во всплывающей подсказке.

$(document).ready(function () {
    // Run this function for all validation error messages
    $('.field-validation-error').each(function () {

        // Get the name of the element the error message is intended for
        // Note: ASP.NET MVC replaces the '[', ']', and '.' characters with an
        // underscore but the data-valmsg-for value will have the original characters
        var inputElem = '#' + $(this).attr('data-valmsg-for').replace('.', '_').replace('[', '_').replace(']', '_');

        var corners = ['left center', 'right center'];
        var flipIt = $(inputElem).parents('span.right').length > 0;

        // Hide the default validation error
        $(this).addClass('Hidden');

        // Show the validation error using qTip
        $(inputElem).filter(':not(.valid)').qtip({                
            content: { text: $(this).text() } , // Set the content to be the error message
            position: {
                my: corners[flipIt ? 0 : 1],
                at: corners[flipIt ? 1 : 0],
                viewport: $(window)
            },
            show: { ready: true },
            hide: false,                
            style: { classes: 'ui-tooltip-red' }
        });            
    });
});

Вот сообщение в блоге , в котором подробно объясняется, как это сделать.

Answer 2

Решение, опубликованное Ником Олсеном, прекрасно работает!Одно наблюдение:

.replace (), используемый в этом выражении, заменяет только первые вхождения ‘.’ ‘[' и ']‘

var inputElem = ‘#’ + $(this).attr(‘data-valmsg-for’).replace(‘.’, ‘_’).replace(‘[', '_').replace(']‘, ‘_’);

Чтобы заменить все вхождения, строка должнабыть что-то вроде:

var inputElem = "#" + $(this).attr("data-valmsg-for").replace(/\./g,"_").replace(/[\[\]]/g, "_");