In this article I will explain with an example, how to solve the problem of RequiredFieldValidator not working when OnClientClick event is added to the Button in ASP.Net.
Page_ClientValidate function of ASP.Net Validators is used to perform validation in order to make the RequiredFieldValidator work with JavaScript OnClientClick event.
HTML Markup
The HTML markup consists of an ASP.Net TextBox, a RequiredFieldValidator and a Button.
The Button has been assigned a JavaScript OnClientClick event handler.
Name:<asp:TextBox ID="txtName" runat="server" />
<asp:RequiredFieldValidator runat="server" ErrorMessage="Required" ControlToValidate="txtName"></asp:RequiredFieldValidator>
<br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" OnClientClick="return Validate();" />
Button Click Event
When the Submit Button is clicked, the success message is displayed in JavaScript Alert MessageBox using ClientScript RegisterStartupScript function.
C#
protected void Submit(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Record submitted.')", true);
}
VB.Net
Protected Sub Submit(sender As Object, e As EventArgs)
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Record submitted.')", True)
End Sub
The Problem
The following JavaScript function Validate will display the Confirmation MessageBox. But the RequiredFieldValidator will not work for the TextBox and the PostBack will happen even if the TextBox is empty.
<script type="text/javascript">
function Validate() {
return confirm('Do you want to submit data?');
}
</script>
The Solution
In order to solve the problem, the Page_ClientValidate JavaScript function of ASP.Net Validators will be used.
The Page_ClientValidate JavaScript function will make sure that all Validators have validated the form.
Finally, if the validation is successful then only the JavaScript Confirmation will be raised.
<script type="text/javascript">
function Validate() {
if (Page_ClientValidate()) {
return confirm('Do you want to submit data?');
}
return false;
}
</script>
When using Validation Groups, the ValidationGroup property is assigned to the RequiredFieldValidator and Button control.
Inside the Validate JavaScript function, Validation Group name is passed to the Page_ClientValidate function.
This will verify the validators belonging to the specified group only i.e. Group1.
Name:<asp:TextBox ID="txtName" runat="server"/>
<asp:RequiredFieldValidator runat="server" ErrorMessage="Required"
ControlToValidate="txtName" ValidationGroup="Group1">
</asp:RequiredFieldValidator>
<br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit"
OnClientClick="return Validate();" ValidationGroup="Group1" />
<script type="text/javascript">
function Validate() {
if (Page_ClientValidate("Group1")) {
return confirm('Do you want to submit data?');
}
return false;
}
</script>
Screenshot
![ASP.Net RequiredFieldValidator not working when OnClientClick event is added to Button]()
Demo
Downloads
