This simple program will guide how to do client side validation of Form in JavaScript.

In this just make a form as follows:

  1. Name
    1. <asp:TextBox ID="txtName" />
  2. Email
    1. <asp:TextBox ID="txtEmail" />
  3. Web URL
    1. <asp:TextBox ID="txtWebUrl" />
  4. Zip
    1. <asp:TextBox ID="txtZip" />
  5. Button
    1. <asp:Button ID="btnSubmit" OnClientClick=" return validate()" runat="server" Text="Submit" />

Now on the source code of this form in script tag write the following code:

  1. <script language="javascript" type="text/javascript">
  2. function validate()
  3. {
  4. if (document.getElementById("<%=txtName.ClientID%>").value=="")
  5. {
  6. alert("Name Feild can not be blank");
  7. document.getElementById("<%=txtName.ClientID%>").focus();
  8. return false;
  9. }
  10. if(document.getElementById("<%=txtEmail.ClientID %>").value=="")
  11. {
  12. alert("Email id can not be blank");
  13. document.getElementById("<%=txtEmail.ClientID %>").focus();
  14. return false;
  15. }
  16. var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/;
  17. var emailid=document.getElementById("<%=txtEmail.ClientID %>").value;
  18. var matchArray = emailid.match(emailPat);
  19. if (matchArray == null)
  20. {
  21. alert("Your email address seems incorrect. Please try again.");
  22. document.getElementById("<%=txtEmail.ClientID %>").focus();
  23. return false;
  24. }
  25. if(document.getElementById("<%=txtWebURL.ClientID %>").value=="")
  26. {
  27. alert("Web URL can not be blank");
  28. document.getElementById("<%=txtWebURL.ClientID %>").value="http://"
  29. document.getElementById("<%=txtWebURL.ClientID %>").focus();
  30. return false;
  31. }
  32. var Url="^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&\?\/.=]+$"
  33. var tempURL=document.getElementById("<%=txtWebURL.ClientID%>").value;
  34. var matchURL=tempURL.match(Url);
  35. if(matchURL==null)
  36. {
  37. alert("Web URL does not look valid");
  38. document.getElementById("<%=txtWebURL.ClientID %>").focus();
  39. return false;
  40. }
  41. if (document.getElementById("<%=txtZIP.ClientID%>").value=="")
  42. {
  43. alert("Zip Code is not valid");
  44. document.getElementById("<%=txtZIP.ClientID%>").focus();
  45. return false;
  46. }
  47. var digits="0123456789";
  48. var temp;
  49. for (var i=0;i<document.getElementById("<%=txtZIP.ClientID %>").value.length;i++)
  50. {
  51. temp=document.getElementById("<%=txtZIP.ClientID%>").value.substring(i,i+1);
  52. if (digits.indexOf(temp)==-1)
  53. {
  54. alert("Please enter correct zip code");
  55. document.getElementById("<%=txtZIP.ClientID%>").focus();
  56. return false;
  57. }
  58. }
  59. return true;
  60. }
  61. </script>
And in code behind file just write the below code.
  1. Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  2. btnSubmit.Attributes.Add("onclick", "return validate()")
  3. End Sub
Now you will get a form with proper validation.

I hope this is going to help you.