How to get Client-side validation of ASP.Net page to run

asp.netvalidation

I'm trying to get client-side validation running. I've put together a very simple test – file name is aTET3.aspx:

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeFile="aTET3.aspx.cs" Inherits="aTET3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TEST</title>

    <script type="text/javascript">
    //<![CDATA[
    function TEST() 
    {
        alert("INSIDE TEST");
        alert("ValidatorCommonOnSubmit()=" + ValidatorCommonOnSubmit());
        alert("Page_ClientValidate()=" + Page_ClientValidate());
    }
    //]]>
    </script>
</head>

<body link="#1A548E" vlink="#1A548E" alink="#1A548E" onunload="TEST()">

<form name="appForm" method="post" action="aTET3.aspx" id="appForm" runat="server">
<asp:ValidationSummary id="appValidationSummary" 
    ValidationGroup="appValidation" 
    DisplayMode="List"
    EnableClientScript="true"
    HeaderText="Loan application not ready"
    runat="server"
    Enabled="true"
    Visible="true" 
    ShowSummary="true" />
<asp:Label ID="lblMessage" Font-Bold="true" ForeColor="Red" runat="server" />

<br />
Enter amount:

<asp:RequiredFieldValidator ID="ApplicationAmountValidator" 
    ValidationGroup="appValidation" 
    ControlToValidate="txtApplicationAmount"
    ErrorMessage="Application amount is required." 
    EnableClientScript="true" 
    Enable="true"
    Display="Dynamic"
    runat="server">+++</asp:RequiredFieldValidator>

<asp:TextBox ID="txtApplicationAmount" Columns="6" runat="server" />

<br /><br />

<asp:Button ID="btnSave" runat="server" Text="Send Application" 
     CausesValidation="true" />

</form>


</body>
</html>

The page has a single textbox with a RequiredFieldValidator. There is also a ValidationSummary control, and a submit button. (I added the TEST() method, called on Unload, to check the state of the page just before callback.) No client-side validation occurs; instead, the request is sent back to the server. If I call Validate() on the server, then I get validation.

I have tried adding ValidateRequest="true" to the Page directive with same results.

When I look at the emitted Javascript, a few things jump out to me. Here's part of it:

<script type="text/javascript">
<!--
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
// -->
</script>

Note that Page_ValidationActive is set to False, which means that ValidatorOnSubmit always returns true. That seems odd to me, except that I looked at 'WebUIValidation.js', and see that ValidatorCommonOnSubmit does not validate the page anyhow – the Page_ClientValidate() method does, but how do I get it to run?

In my TEST() method, when I manually call Page_ClientValidate(), the form does get validated client-side as expected – and the postback request is sent back to the server.

I've tested with both FireFox 3.0.10 and MSIE 7, with same results.

I expect I'm missing something very basic and I'm going to end up feeling very stupid – can anyone point it out?

Best Answer

You have to have all the validation stuff in the same validation group. Including the button that fires the validation.

Related Topic