How to validate a form in ASP.NET using an image button, before raising the onClick event?

Question

This may be a silly question but i'm a beginer here..

I created a form in asp.net and it's all fields are validated using validation controls on clicking an image button.It is working properly.After that i add an event to the button.This is the code of that button.

<asp:ImageButton ID="Submit" runat="server" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png" OnClientClick="submitClicked" />

The purpose of that event is for submitting all the values in the form to database.Here my problem is,After adding the onClick event to button, validation has not taken place.And i want these onClick event to raise only when the form is validated successfully.Can any one guide me ..Thanks in Advance.

Answer 1

make sure that you are using the same validation group for all the validation controls. in addition you can use OnClientClick event to call validation.

<asp:ImageButton ID="Submit" runat="server" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png"  OnClientClick="return Page_ClientValidate('AddSchoolValidationGroup');"  />

Answer 2

You can use javascript function

    function validateForm() {
        if (document.getElementById('txtName').value == '') 
         { 
             ValidatorEnable(document.getElementById("rfvName"), true) // rfvName is id of validator
               return false; }
    }

and call that function on client click of image button

   <asp:ImageButton ID="Submit" runat="server" OnClientClick="validateForm();" OnClick="submit_Clicked" ValidationGroup="AddSchoolValidationGroup" CausesValidation="true" ImageUrl="~/Styles/images/submit-btn.png" /> 

Answer 3

You need to validate the page before submitting. Please add attribute for button.

protected void Page_Load(object sender, EventArgs e)
{
   Submit.Attributes.Add("onclick", "javascript:if(Page_ClientValidate('AddSchoolValidationGroup')){return true;}else{return false;}");
}

Since you have a method "submitClicked" in onclient click, you can call the same inside Page_ClientValidate and remove the existing "OnClientClick" property.

protected void Page_Load(object sender, EventArgs e)
{
   Submit.Attributes.Add("onclick", "javascript:if(Page_ClientValidate('AddSchoolValidationGroup')){submitClicked(); return true;}else{return false;}");
}

Answer 4

Replace OnClientClick="submitClicked" with OnClientClick="return submitClicked();"

function submitClicked()
{
    if (document.getElementById('txtname') != '') {
        return true;
    }
    else {
        alert('Please Enter Name');
        return false;
    }
}

So until all the validations are validated, the Server side event will not be called.