验证文本框的正则表达式后，ASP.NET禁用按钮

Question

I want to disable the asp button after the user submit the form with the correct regular expression

Here is my form

<asp:TextBox ID="TextBox2" runat="server" placeholder="Email" class="form-control" type="email" Font-Size="Large" oninvalid="setCustomValidity(')"></asp:TextBox>

<asp:Button ID="Button1" runat="server" class="btn btn-primary btn-block btn-lg" Text="Submit" OnClick="Button1_Click" ValidationGroup="S" UseSubmitBehavior="false" OnClientClick="myFunction2()" />

<asp:RegularExpressionValidator ID="RegularExpressionValidator3" ControlToValidate="TextBox2" runat="server" ErrorMessage="Invalid Email" ValidationGroup="S" Visible="false" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>

this is the validation javascript function

<script>
    function myFunction2() {
        if (Page_ClientValidate('S')) {
                                    document.getElementById('Button1').disabled = true;
                    document.getElementById('Button1').value = "Please waitً";
         }
 } 
</script>

The problem is the button is disabled after the text box has any value which did not pass the email regex check

Code Behind

protected void Button1_Clicked(object sender, EventArgs e) { System.Threading.Thread.Sleep(5000); }

Answer 1

It suppose to you wanna lock submit button during server side processing. For doesing the trick, use OnClientClick attribute of asp:Button in below approach:

<asp:Button 
  ID="Button1" 
  runat="server" 
  class="btn btn-primary btn-block btn-lg" 
  Text="Submit" 
  OnClick="Button1_Click" 
  UseSubmitBehavior="false" 
  OnClientClick="this.disabled = true; this.value = 'Processing ...';" />

So the button will be disabled when user click on it, and it will be enabled when the server side operation will be finished.

Answer 2

How about some client-side JavaScript magic:

 var goodEmail = /^(([^<>()[\\]\\\\.,;:\\s@\\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/; var goodEntry = /^^(?:(?:[^<>()[\\]\\\\.,;:\\s@\\"]*(?:\\.[^<>()[\\]\\\\.,;:\\s@\\"]*)*)|(?:\\"?.*\\"?))@?(?:(?:\\[?[0-9]{0,3}\\.?[0-9]{0,3}\\.?[0-9]{0,3}\\.?[0-9]{0,3}\\]?)|(?:(?:[a-zA-Z\\-0-9]*\\.)*[a-zA-Z]{0,}))$/; $("input") .data("oldValue", "") .bind("input propertychange", function() { var $this = $(this); var newValue = $this.val(); if (!goodEntry.test(newValue)) return $this.val($this.data("oldValue")); if (goodEmail .test(newValue)) { $this.removeClass("redborder"); $("#submitBtn").prop("disabled",false); } else { $this.addClass("redborder"); $("#submitBtn").prop("disabled",true); } return $this.data("oldValue", newValue); }); function submitit() { console.log($("#email").val() + " is valid: Ready to proceed!"); } 

 .redborder { border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <p>Enter an email address:</p> <input id='email'> <button type='submit' disabled id='submitBtn' onclick="submitit()">Submit</button> </form> 

However, client-side validation is simply not enough to be safe. All sorts of things can happen.