RequiredFieldValidator and OnClientClick Together

Question

I have one textbox (Mandatory using RequiredFieldValidator) and one submit button. I have applied an loading gif using the following code on button's OnClientClick.

<asp:Image ID="ImgAjaxloaderClarification" ImageUrl="/images/ajaxloadernew.gif"
    AlternateText="Loading Image" runat="server"/>                                            
<asp:ImageButton ID="btnRequestClarification" runat="server" 
   ImageUrl="/images/btn_RequestFutureClarif.png" ValidationGroup="VGFillHours"
    OnClientClick="return showContent();"                    
    OnClick="btnRequestClarification_Click" />

Following is the javascript function to show the loader gif. (Initially the gif set as display:'none')

<script type="text/javascript" language="javascript">
    function showContent() 
    {
        if (document.getElementById("<%=RequiredFieldValidator1.ClientID %>").getAttribute("IsValid")) 
        {
            document.getElementById("<%=ImgAjaxloaderClarification.ClientID %>").style.display = "block";
            return true;
        }
        return false;
    }
</script>

The issue is RequiredFieldValidator was working fine before calling the OnClientClick function. But it has suddenly stoped working. Allthough the gif is shown but the RequiredFieldValidator is not working.

Any help.

Try using the Validator_IsValid client-side method, instead of using the attribute approach. This method returns a boolean I believe. — Brian Mains, Nov 23 '11 at 15:46

James Johnson · Accepted Answer · 2011-11-23T15:53:30.047

4

Try triggering the validation from your JavaScript function:

function showContent(){ 
    var isValid = Page_ClientValidate("");
    if (isValid){
        document.getElementById("<%=ImgAjaxloaderClarification.ClientID %>").style.display = "block";              
    }
    return isValid;
}

edited Nov 23 '11 at 15:53

answered Nov 23 '11 at 15:47

James Johnson

45,496
8
73
110

score 1 · Answer 2 · edited May 23 '17 at 11:48

My solution is very similar to James's answer:

Watch out for these issues when calling Page_ClientValidate(): Problem with Page_ClientValidate

function showContent() 
{
    // if you need one group use     
    // Page_ClientValidate('VGFillHours');
    if(Page_ClientValidate())  //validates all groups
    {
        document.getElementById("<%=ImgAjaxloaderClarification.ClientID %>").style.display = "block";
        return true;
    }
    return false;
}

RequiredFieldValidator and OnClientClick Together

2 Answers2