CODEWITHSUNDEEP
asp.net
Ashish
Ashish

Reputation: 67

RequiredFieldValidator and OnClientClick Together

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.

Upvotes: 1

Views: 3701

Answers (2)

rick schott
rick schott

Reputation: 21127

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;
}

Upvotes: 1

James Johnson
James Johnson

Reputation: 46067

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;
}

Upvotes: 4

Related Questions