ASP.NET MVC验证使用qTip jQuery插件 [英] ASP.NET MVC Validation Using qTip jQuery Plugin

问题描述

我使用的解决方案，找到<一href=\"http://stackoverflow.com/questions/6802045/integrating-qtip-with-mvc3-and-jquery-validation-errorplacement\">here显示在使用qTip jQuery插件提示客户端验证错误。该解决方案的伟大工程的客户端验证，但我希望能够以同样的方式来显示服务器端验证错误。有谁知道如何显示在利用qTip提示服务器端验证错误？

I am using the solution found here to show client side validation errors in a tooltip using the qTip jQuery plugin. This solution works great for client side validation but I would love to able to display server side validation errors in the same way. Does anyone know how to show server side validation errors in tooltips utilizing qTip?

感谢

推荐答案

如果有一个服务器端验证错误，页面加载时会出现与类字段验证错误，因此我们可以span元素简单地遍历与该类的所有元素，提取内容或错误信息，并在工具提示中显示出来。

If there is a server-side validation error, when the page loads there will be a span element with the class 'field-validation-error' so we can simply loop over all elements with that class, extract the content or the error message, and display it in a tooltip.

$(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' }
        });            
    });
});

下面是一个<一个href=\"http://nickstips.word$p$pss.com/2011/08/18/asp-net-mvc-displaying-client-and-server-side-validation-using-qtip-tooltips/\">blog帖子说明如何在细节做到这一点。

Here is a blog post that explains how to do this in detail.

这篇关于ASP.NET MVC验证使用qTip jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！