CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3jquery-validate
Joper
Joper

Reputation: 8209

Display errors in tooltips jquery plugin based on asp.net mvc validation attributes

I want to display jquery errors in tooltips like in this image:

enter image description here

there is some jquery plugins around which could do that: http://www.position-relative.net/creation/formValidator/demos/demoValidators.html http://validity.thatscaptaintoyou.com/

But they not designed to work with asp.net mvc 3.0 validation attributes. Is there any similar plugin which would do the thing? or any thing else i can do to display errors like that in tooltips?

Upvotes: 0

Views: 1914

Answers (1)

Mahesh KP
Mahesh KP

Reputation: 6446

We have done something similar to this using Jquery validation plugin. For this we have to create the popup div initially.

Javascript Fn

$("#formID").validate({
        submitHandler: function (form) {
            CallFunction();
        },

        highlight: function (element, errorClass) {
            HidePopup(element);
            ShowPopup(element);
        },

        unhighlight: function (element, errorClass) {
            HidePopup(element);
        },

        errorElement: "span",

        errorPlacement: function (error, element) {
            error.appendTo(element.prev("label"));
        },

        rules: {
           txtName:"required"
        }
});

function ShowPopup(paramElement)
{
    //function to show popup and position div accordingly
    $('#div'+paramElement.Id).show();
}

function HidePopup(paramElement)
{
    //function to hide popup
    $('#div'+paramElement.Id).hide();
}



**Html**


<form id="formID" action="">

    <input name="txtName" type="text" id="txtName" />
    <div id="divtxtName" >Please enter name</div>

</form>

Upvotes: 1

Related Questions