Determine if page is valid in JavaScript - ASP.NET

What is the best way to determine if a form on an ASPX page is valid in JavaScript?

I am trying to check the validation of an user control that was opened using the JavaScript window.showModalDialog() and checking the 'Page.IsValid' property on the server side does not work. I am using ASP.NET validation controls for page validation.

If I have a page that is using a bunch of ASP.NET validation controls I will use code similar to the following to validate the page. Make the call on an input submit. Hopefully this code sample will get you started!

    <input type="submit" value="Submit" onclick"ValidatePage();" />

    <script type="text/javascript">

    function ValidatePage() {

        if (typeof (Page_ClientValidate) == 'function') {
            Page_ClientValidate();
        }

        if (Page_IsValid) {
            // do something
            alert('Page is valid!');                
        }
        else {
            // do something else
            alert('Page is not valid!');
        }
    }
    
</script>

You are checking for Page.IsValid where you should be checking for Page_IsValid (it's a variable exposed by the .NET validators) :)

The ASP.NET validation controls expose a client side API you can use with javascript: http://msdn.microsoft.com/en-us/library/aa479045.aspx

You should be able to check the Page_IsValid object to see if any of the validation controls are invalid.

$("input[id$=Button2]").click(function () {
    var validated = Page_ClientValidate('repo');
    if (validated) {
        // JavaScript code.
    }
});

You can use jQuery and the Validation plugin to perform client side validation. This will work with both html tags and asp.net server controls. Phil Haack has a good sample project that will show you the basics.

This SO question has an in depth review of this approach as well.

Set ValidationGroup property for each asp.net validator control in your page, you have to provide same name to ValidationGroup in a page.

For example:

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Required" ValidationGroup="Validate"></asp:RequiredFieldValidator>
    <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="RangeValidator" ValidationGroup="Validate"></asp:RangeValidator>
    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="CustomValidator" ValidationGroup="Validate"></asp:CustomValidator>

After that in your javascript call like Page_ClientValidate("ValidationGroup")

For example:

function ValidatePage(){
if(Page_ClientValidate("Validate")){ //validate using above validation controls group
      //validation return true section
}
else{
      //validation return false section
}
}