jQuery Validation With Masterpage in asp.net

Question

i have a childpage.aspx in masterpage and i am trying to validate required field in childpage through masterpage, the following code i have write in masterpage to validate

$(document).ready(function()
    {
                var container = $('#sam586'); 
                $("#aspnetForm").validate(
                 { 
                    errorContainer: container,
                    //errorClass: "invalid",  
                 errorLabelContainer: $("#sam586"),
                 wrapper: 'li',
                 meta: "validate",
                    rules:
                    {
                        ctl00_ContentPlaceHolder1_txtUserName:
                        {
                           required:true
                        },
                        ctl00_ContentPlaceHolder1_txtPassword:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_txtFirstName:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_txtLastName:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_ddlDepartment:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_ddlDesignation:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_txtEmail:
                        {
                            required:true,
                            email:true
                        },
                        ctl00_ContentPlaceHolder1_ddlStatus:
                        {
                            required:true
                        },
                        ctl00_ContentPlaceHolder1_ddlRole:
                        {
                            required:true
                        }
                    },
                    messages:
                    {
                        ctl00_ContentPlaceHolder1_txtUserName:"Please enter username",
                        ctl00_ContentPlaceHolder1_txtPassword:"Please enter password",
                        ctl00_ContentPlaceHolder1_txtFirstName:"please enter first name",
                        ctl00_ContentPlaceHolder1_txtLastName:"Please enter last name",
                        ctl00_ContentPlaceHolder1_ddlDepartment:"Select Department",
                        ctl00_ContentPlaceHolder1_ddlDesignation:"Select Designation",
                        ctl00_ContentPlaceHolder1_txtEmail:"Enter proper email address",
                        ctl00_ContentPlaceHolder1_ddlStatus:"Select Status",
                        ctl00_ContentPlaceHolder1_ddlRole:"Select Role"
                    }
                });
            });

when is try all this stuff in single aspx page it work perfectly.

but the problem is i want to show validation erro in div tag name:("sam586") which later will be converted into the greypopup with the help of jquery . so any one can helpme out ,or any suggestion is appreciable.

thanks in advance.

Answer 1

It’s not clear, but I’m guessing that you are having trouble finding the content control.

If the control with ID “sam586” is in the content page then its ID name will be mangled in the resulting page, $(“#sam586”) will not find it, because it's id will be “ctl##_..._sam586” I’m sure you know that by now.

I have seen a few ways to deal with this:

Assign a unique class to “sam586” so that you can find it with class $(“.samsclass”)

Just look for any tag that ends with “sam586” using the attribute syntax: $("input[id$='sam586']").

Create a javascript variable in the aspx of the content page (and any content page where you want the master page code to work). Assign the clientID to a variable. Your master page code can now use that variable.

In the content.aspx:

 script type="text/javascript">

    var samsvar = '#<%= sam586.ClientID %>';

 /script>

In the masterpage

$(samsvar).text();