Validation occured after Successfull Submission

Question

I want to validate a textbox field. The validation controls works well when I remove the return false at the end of the javascript. But removing return false does not submit the data. I also observed that when I use return false the data is successfully submitted but the validation is checked after data is submitted.

function ConvertToImage(btnExport) {
  html2canvas($("#myDIV")[0]).then(function(canvas) {
    var base64 = canvas.toDataURL();
    $("[id*=hfImageData]").val(base64);
    __doPostBack(btnExport.name, "");
  });
  return false;
}

<asp:TextBox runat="server" ID="custom_Name" Height="50px" ValidationGroup="vg" Width="250px"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Font-Size="X-Large" ControlToValidate="custom_Name" ErrorMessage="Please Enter Product Name" ValidationGroup="vg"></asp:RequiredFieldValidator>
<br />
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="Only Alphabets are Allowed" Font-Size="X-Large" ControlToValidate="custom_Name" ValidationExpression="[a-zA-Z ]*$" ValidationGroup="vg"></asp:RegularExpressionValidator>
<!--Button for save image start-->
<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="btnExport" Text="Export to Image" runat="server" CausesValidation="true" OnClick="ExportToImage_Click" OnClientClick="return ConvertToImage(this)" CssClass="btnstyle" ValidationGroup="vg" Height="50px" Width="200px" />
<!--Button for save image ends-->

Answer 1

You need to add javascript: in OnClientClick .

OnClientClick="return ConvertToImage(this)" will be

OnClientClick="javascript:return ConvertToImage(this)"