Form Validation

   

If you've ever really dealt with form validation in a serious manner, where a user's input must be validated to the nth degree, you know that it can be a very daunting task. In critical situations, it was generally necessary to use round trips to the server in conjunction with client-side JavaScript as a preliminary check. In these situations, you needed to perform server-side validation because you couldn't guarantee that an individual had a JavaScript-enabled browser. Even users who did have capable browser possibly could disable the JavaScript functionality.

But you would generally develop both strategies to save from making trips to the server if you could prevent them through client-side JavaScript. If you had many form elements, your validation code could run into hundreds of lines of code for both server-side and client-side validation.

Enter ASP.NET! (Can't you hear the collective cheers of web programmers around the world?) ASP.NET provides a bunch of validators for which you will be thanking a higher power (I'm not talking about Bill Gates) for years to come. These validators are Power Tools with a capital P and T.

I'm gonna throw you a baited hook and I know you're going to bite. I did a test today and wrote from scratch two different web pages: A traditional ASP page and an ASP.NET web form. They both have identical form fields for the user to fill out. I have timed my development time and lines of code to show you how cool these ASP.NET validators are.

In Figure 8.1 you can see a basic form requesting a name, address, city, state, zip code, phone number, and e-mail address. What I did was create this form by hand in traditional ASP and in ASP.NET with full client-side and server-side form validation.

Figure 8.1. Validating forms in traditional ASP was at the very least a nightmare.
graphics/08fig01.gif

The following is the traditional ASP page:

Traditional ASP trad_validation.asp
<%  dim vName,vAddress,vCity,vState,vZip,vPhone,vEmail,vError  vName=""  vAddress=""  vCity=""  vState=""  vZip=""  vPhone=""  vEmail=""  vError=""  If Request.Form("Submit") <> "" then  vName = Request.Form("Name")  vAddress = Request.Form("Address")  vCity = Request.Form("City")  vState = Request.Form("State")  vZip = Request.Form("Zip")  vPhone = Request.Form("Phone")  vEmail = Request.Form("Email")  if vName = "" then vError = vError & "Name is a required field<br>"  if vAddress = "" then vError = vError & "Address is a required field<br>"    if vCity = "" then vError = vError & "City is a required field<br>"  if vState = "" then vError = vError & "State is a required field<br>"  if SSisZipCode(vZip) = False then vError = vError & "Enter a valid Zip Code<br>"  if SSisPhoneNum(vPhone) = False then vError = vError & "Enter a valid Phone Number<br>"  if SSisEmail(vEmail) = False then vError = vError & "Enter a valid Email<br>"  If vError = "" then      vError = "You have filled in the form successfully!!!"  Else      vError = "There are problems with your form:<br>" & vError  End If  End If  Function SSisEmail(theField)      SSisEMail = false      Dim regExMail, retValMail      Set regExMail = New RegExp      regExMail.Pattern ="^[\w-\.]{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,3}$"      regExMail.IgnoreCase = true      retValMail = regExMail.Test(theField)      Set regExpMail = Nothing      If not retValMail Then          exit function      End If      SSisEmail = true  End Function  Function SSisPhoneNum(theField)      SSisPhoneNum = false      Dim regExPh, retValPh      Set regExPh = New RegExp      regExPh.Pattern ="[0-9]{3}-[0-9]{3}-[0-9]{4}"      retValPh = regExPh.Test(theField)      Set regExPh = Nothing      If not retValPh Then          exit function      End If      SSisPhoneNum = true  End Function  Function SSisZipCode(theField)      SSisZipCode = false      Dim regExZip, retValZip      Set regExZip = New RegExp      regExZip.Pattern ="^([0-9]{5}(( |-)[0-9]{4})?)"      retValZip = regExZip.Test(theField)      Set regExZip = Nothing      If not retValZip Then          exit function      End If      SSisZipCode  = true  End Function  %>  <head>  <title>Traditional ASP - Validation</title>  <script language="JavaScript1.2">  function ValidForm(form){      var valid = true      var message="There are problems with your form:";      if (!isRequired(form.elements["Name"])){          message += "\n Name is a required field"          valid= false;          }      if (!isRequired(form.elements["Address"])){          message += "\n Address is a required field"          valid= false;      }      if (!isRequired(form.elements["City"])){          message += "\n City is a required field"          valid= false;      }       if (!isRequired(form.elements["State"])){          message += "\n State is a required field"          valid= false;      }      if (!isZIPCode(form.elements["Zip"])){          message += "\n Insert a valid Zip code"          valid= false;      }      if (!isPhoneNum(form.elements["Phone"])){          message += "\n Insert a valid Phone Number"          valid= false;      }      if (!isEmail(form.elements["Email"])){          message += "\n Insert a valid Email"          valid= false;      }      if (!valid){          alert(message)          return false      }  return true  }  function isEmail(theField){      if (!isRequired(theField)) return false;      var filter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+ ([a-zA-Z0-9])+$/;      if (filter.test(theField.value)){           return true;      }else{             return false;      }  }  function isPhoneNum(theField){      if (!isRequired(theField)) return false;      var filter=/\(?\d{3}\)?([-\/\.])\d{3}\1\d{4}/;          if (filter.test(theField.value)){              return true;      }else{              return false;      }  }  function isZIPCode(theField){      if (!isRequired(theField)) return false;      var filter=/^\d{5}$|^\d{5}[\-\s]?\d{4}$/;      if (filter.test(theField.value)){          return true;      }else{          return false;      }  }  function isRequired(theField){      return(!theField.value == "")  }  </script>  </head>  <body bgcolor="#FFFFFF" text="#000000">  <%if vError <> "" then Response.Write vError%>  <form name="form1" method="post" action="trad_validation.asp" >  Name:<input type="text" name="Name" value="<%=vName%>"><br>  Address: <input type="text" name="Address" value="<%=vAddress%>"><br>  City: <input type="text" name="City" value="<%=vCity%>"><br>  State: <input type="text" name="State" value="<%=vState%>"><br>  Zip: <input type="text" name="Zip" value="<%=vZip%>"><br>  Phone: <input type="text" name="Phone" value="<%=vPhone%>"> Format: xxx-xxx-xxxx<br>  Email: <input type="text" name="Email" value="<%=vEmail%>"><br>  <input type="Submit" name="Submit" value="Validate Form" onClick="return ValidForm(this. graphics/ccc.gifform)"><br>  </form>  </body>  </html> 

And the results were 168 lines of code and 2 hours and 15 minutes to code by hand. Whew! (I must confess, my JavaScript isn't what it used to be, and I spent a bit of time debugging my pitiful client-side validation.) Now here's the part of the book where I get mean, but it's for your own good because I want you to get all you can out of this chapter.

I'm not going to show you the results 'til the end of the chapter. (Don't even think of flipping forward…HEY!!! YOU HEARD ME…DON'T FLIP FORWARD!) There you will find out all the details of how cool, exciting, efficient and, did I say, exciting ASP.NET really is.


   
Top


ASP. NET for Web Designers
ASP.NET for Web Designers
ISBN: 073571262X
EAN: 2147483647
Year: 2005
Pages: 94
Authors: Peter Ladka

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net