将qTip与MVC3和jQuery验证集成(errorPlacement)

我正在使用MVC3进行项目工作,我正在尝试将qTip2与jQuery验证集成,以便将错误显示为浮动提示.我遇到的问题是,显然在表单验证时调用errorPlacement并没有做任何事情,因为它与MVC处理它的方式有关.

基本上,我想做的是使用MVC3和jQuery(注释)之间的集成验证,但也与qTip集成,以更改错误msg的显示方式.

我已经搜索全部,最好的我可以找到有人建议修改jquery.validate.unobtrusive.js – onError函数,但我检查出来,不知道如何正确地修改它,加上更喜欢一个没有的解决方案要求我改变现有的脚本.

感谢您的帮助.

我到目前为止

我的型号：

public class User
{
    [Required]
    public string Id { get; set; }

        [Required]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    public string FirstName { get; set; }

    public string SecondName { get; set; }

    public string LastName { get; set; }
}

我的javascript在我看来：

$('#Form').validate({
    errorClass: "errormessage",errorClass: 'error',validClass: 'valid',errorPlacement: function (error,element) {
        // Set positioning based on the elements position in the form
        var elem = $(element),corners = ['left center','right center'],flipIt = elem.parents('span.right').length > 0;

        // Check we have a valid error message
        if (true) {
            // Apply the tooltip only if it isn't valid
            elem.filter(':not(.valid)').qtip({
                overwrite: false,content: error,position: {
                    my: corners[flipIt ? 0 : 1],at: corners[flipIt ? 1 : 0],viewport: $(window)
                },show: {
                    event: false,ready: true
                },hide: false,style: {
                    classes: 'ui-tooltip-red' // Make it red... the classic error colour!
                }
            })

            // If we have a tooltip on this element already,just update its content
            .qtip('option','content.text',error);
        }

        // If the error is empty,remove the qTip
        else { elem.qtip('destroy'); }
    },success: $.noop // Odd workaround for errorPlacement not firing!
})

$('#Form').submit(function () {
    if (!$(this).valid())
        return false;

    $.ajax({
        url: this.action,type: this.method,data: $(this).serialize(),beforeSend: function () {
        },success: function (result) {
        },error: function (result) {
        }
    });
    return false;
});

解决方法

伟大的解决方案谢谢,我已经使用这个我的应用程序.

…要进一步添加,而不是直接修改jquery.validate.unobtrusive.min.js文件,我使用以下来修改不显眼验证的默认行为.

$(document).ready(function () {

            var settngs = $.data($('form')[0],'validator').settings;
            settngs.errorPlacement = function(error,inputElement) {
                // Modify error placement here
            };
});

Eagerly Performing ASP.NET MVC 3 Unobtrusive Client Side Validation