Validates the control's detailed resolution of the OnClientClick event for the Button

  • 2020-03-30 00:45:08
  • OfStack

A, events,

This is a problem that has been neglected or not found by me for a long time. The problem is as follows:

In a page, when a Button control fires the OnClientClick event and the event returns true and false, the validation control is disabled. The specific description is as follows:

The.net page is as follows:


<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBoxTest" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBoxTest"
ErrorMessage=" Can't be empty " Display="None"></asp:RequiredFieldValidator><ajaxToolkit:ValidatorCalloutExtender
ID="ValidatorCalloutExtender1" TargetControlID="RequiredFieldValidator1" runat="server">
</ajaxToolkit:ValidatorCalloutExtender>
<asp:Button ID="ButtonText" runat="server" Text=" test " OnClientClick="return confirm(' Are you sure you want to submit it? ');" />
</div>
</form>

As shown above, add the RequireFieldValidator validation control to the page so that the value of the TextBoxTest cannot be null, and ask the user to confirm whether they need to commit when ButtonText submits the page. It's a very simple page, and it doesn't seem to be a problem. However, when the value of the TextBoxTest is empty, the validation control does not work and the page is submitted successfully. What's the reason?

Respond to events

What's going on here? First I remove the OnClientClick event from ButtonTest to verify that the control works. Why is that? I looked at the source code for the page and found that the ButtonTest control generated the following source code:

< Input type="submit" name="ButtonText" value=" test "onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions) ButtonText" , & quot; & quot; , true, & quot; & quot; , & quot; & quot; , false, false))" id="ButtonText" />

As you can see from this line of source code, the validation control generates a piece of javascript code on the client side to verify that the value in the TextBox is null. When I added the OnClientClick of ButtonTest, I revisited the source code. The source code generated by the ButtonTest control is as follows:

< Input type="submit" name="ButtonText" value=" test "onclick="return confirm(' are you sure you want to submit? '); (new WebForm_DoPostBackWithOptions WebForm_PostBackOptions (& quot; ButtonText" , & quot; & quot; , true, & quot; & quot; , & quot; & quot; , false, false))" id="ButtonText" />

From this line of code, you can see exactly where the problem is. On the client side, you execute custom javascript, and then you execute the javascript generated by the validation control. Obviously, in this case, the validation control loses any meaning.

Response control

Once I know where the problem is, I can do this by performing custom javascript (return confirm) (' are you sure you want to submit? ') to verify that the controls on the page conform to the rules, I changed the OnClientClick event of ButtonTest as follows:


<asp:Button ID="ButtonText" runat="server" Text=" test " OnClientClick="if(CheckClientValidate()) return Confirm(' Are you sure you want to submit the page? ');" />

The code for the CheckClientValidate() method is as follows:

<script language="javascript" type="text/javascript">
function CheckClientValidate(){  
   Page_ClientValidate();
   if (Page_IsValid){
   return true;
   }else{
   return false;
   }
 }
</script>

Run, test. Verify that the control works. Problem solving.

Four, afterword.

This was the problem and solution that I had known to ignore, and when I discovered it, I broke out in a cold sweat. Thanks to rigorous server-side validation, it would have been a disaster. This also shows how necessary it is to specify strict server-side validation :-). It can not only prevent "hackers" to bypass the client side of the verification, but also to prevent their own errors, resulting in inaccurate data.

Note:

Page_ClientValidate (), which returns True or False based on whether the user input is valid on an aspx page that contains Microsoft validation controls

Can be judged directly.


 if(Page_ClientValidate())
 {
 return true;
 }
 else
 {
 return false;
 }


Related articles: