Show "passed" image or text after validating an asp.net (req. field)validator

Question

I have the following asp.net code:

<asp:TextBox CssClass="mf" runat="server" ID="mail1" Width="270" />
<asp:RequiredFieldValidator ID="rfv1" 
                            runat="server" 
                            ControlToValidate="mail1" 
                            Display="Dynamic" />

Now I want to show an image (or text) if the validation passes on the fly (no postback)

A jQuery solution is also fine by me, but that wouldn't be so safe if javascript is disabled.

Answer 1

Found it on: http://stackoverflow.com/questions/958959/how-can-i-do-form-validation-with-jquery-using-icons-as-pass-fail-indicators

Let me know if someone has a better idea :)

Answer 2

Without relying on an external framework you can tap into the ASP.Net Client Side Validation framework to handle extended/advanced functionality. In this way you are working with the framework, augmenting it instead of replacing it.

A tiny bit of JavaScript is all that is needed to enable the behavior you want.

<asp:TextBox CssClass="mf" runat="server" ID="mail1" Width="270" OnChange="showValidationImage();" />
<asp:RequiredFieldValidator ID="rfv1" 
                        runat="server" 
                        ControlToValidate="mail1" ClientIDMode="Static"
                        Display="Dynamic" >
    <img src="../Image/fail.jpg" />
</asp:RequiredFieldValidator>
<img id="imgPass" src="../Image/pass.jpg" style="visibility:hidden" />
<script language="javascript">
    // This function will be called whenever the textbox changes
    // and effectively hide or show the image based on the state of
    // the client side validation.
    function showValidationImage() {
        if (typeof (Page_Validators) == "undefined") return;

        // isvalid is a property that is part of the ASP.Net
        // client side validation framework
        imgPass.style.visibility = rfv1.isvalid ? "visible" : "hidden";
    }
</script>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />

Notice here that I am using a feature of ASP.Net 4 with ClientIDMode="Static" if you are not using .Net 4 then you will need to use the standard <%= rfv1.ClientID %> server side include to get at the client id inside your script.