Flickering when setting or adding/removing css attribute using JavaScript and ASP.NET

Question

I am trying to do something different and cleaner but hitting brick-walls. I am new to ASP.NET (None MVC).

I have an HTML paragraph tag which holds an error message, I also added the server control or property so that I can show/hide using Server Side Validation.

I usually wrap the tags in a list so that the form elements are aligned accurately. The default style on the paragraph is set to display: none, this hides the entire paragraph when the page loads, so that there is no DOM delay.

If there is an error when the user hits the submit button, the style is replaced by another style which sets it to: display: block;

When I click the button, the error message displays but quickly goes away like a flickering:

The code looks like this:

<%-- USER NAME ERROR --%>
<li>
<p class="default" runat="server" id="lstUserNameErrorMsg">
<span>Invalid Username:</span>
Numbers, uppercase/lower case letters only. No special characters
</p>

<%-- USERNAME TEXTBOX --%>
<asp:TextBox ID="txtUserName" runat="server" MaxLength="16" TabIndex="4">
</asp:TextBox>
<label runat="server" id="lblUserName" for="txtUserName">* Username</label>
</li>

Here is the JavaScript: (This code is tentative)

<script type="text/javascript">
 function validateForm() {
  var element = document.forms["membership"];
  var userNameFlg = document.getElementById("lstUserNameErrorMsg");

  var isLetters = /^[A-Za-z]+$/;

  if (element.txtUserName.value.match(isLetters) && 
element.txtUserName.value.length >= 2) {

   userNameFlg.setAttribute("class", "default");
  }
  else {
   userNameFlg.setAttribute("class", "failed");
  }
  return false;
 }
</script>


<asp:Button ID="btnSubmit" runat="server" Text="Create Accounte" 
OnClick="btnSubmit_Click" OnClientClick="validateForm()" TabIndex="11" />

This is new territory: Where am I going wrong?

Thanks!

Answer 1

Add return before the method call to validateForm().

The postback is still happening and hence the paragraph gets hidden again.

<asp:Button ID="btnSubmit" runat="server" Text="Create Accounte" 
OnClick="btnSubmit_Click" OnClientClick="return validateForm()" TabIndex="11" />

Edit:

In your function you are always returning false. So the postback will always fail. Change it like:

function validateForm() {
            var userNameFlg = document.getElementById("lstUserNameErrorMsg");
            var txtBox = document.getElementById("txtUserName");
            var isLetters = /^[A-Za-z0-9]+$/;

            if (txtBox.value != null && txtBox.value.match(isLetters) && txtBox.value.length >= 2) {
                userNameFlg.setAttribute("class", "default");
                return true;
            }
            else {
                userNameFlg.setAttribute("class", "failed");
                return false;
            }
        }

Also since you are just starting out, I suggest you look at jquery. You could have also achieved this through the use of Asp.Net validation controls. Refer MSDN