Javascript Form Validation Source Code
<html> <head> <title>ASP Form Validation - Page 1</title> <script language="JavaScript"> // You will note that the validation functions use other functions defined further down in this script // This is because JavaScript does not have some of the functions that are built in to vbScript and // They must be created manually. // You can have your commonly used functions in a seperate .js file and include that file as part of you // web page if you wish to avoid having to put the functions on every page you will use them on. var formValid = false; // Validate Start Date //================================================= function valStartDate(vDate) { if (!IsDate(vDate)) { formValid = false; alert("Please Enter a Valid Start Date in the format MM/DD/YYYY"); document.form1.StartDate.focus(); } else formValid = true ; } // Validate End Date //================================================= function valEndDate(vDate) { if (!IsDate(vDate)) { formValid = false; alert("Please Enter a Valid End Date in the format MM/DD/YYYY"); document.form1.EndDate.focus(); } else { var StartDate = new Date(document.form1.StartDate.value); var EndDate = new Date(document.form1.EndDate.value); if (EndDate < StartDate) { formValid = false; alert("End date must be on or after Start Date"); document.form1.EndDate.focus(); } else formValid = true; } } // Validate Numeric Value //===================================================== function valNumeric(nNumber) { if (isNaN(nNumber)) { formValid = false; alert("Only numbers are allowed in this field."); document.form1.NumberValue1.focus(); } else { if (parseFloat(nNumber) < 1 || parseFloat(nNumber) > 10) { formValid = false; alert("This number must be between 1 and 10."); document.form1.NumberValue1.focus(); } else formValid = true; } } // Validate Form //============================================================ function valForm() { valStartDate(document.form1.StartDate.value); valEndDate(document.form1.EndDate.value); valNumeric(document.form1.NumberValue1.value); return formValid; } // IsDate() function // --------------------------------------------------------------------------------------------------------------------- // You may see many IsDate JavaScript Functions on the Internet that are more simple or more complex than the one here. // The simplest one I have seen is very similar to this one, but does not check the month of the new Date expression // created to ensure it is the same as what the user entered. The problem with this is that if you use those functions // and enter a date of 06/33/2004 it will show as a valid date. The date created by the Date() function would be 07/03/204 // which is of course a valid date. I'm not really sure why the JavaScript Date() function does this, but it does and you // need to be aware of it when testing for valid dates. // --------------------------------------------------------------------------------------------------------------------- function IsDate(Expression) { var test = new Date(Expression); if (! isNaN(test.getYear())) { var strMonth = Left(Expression,2) if (Right(strMonth,1) == "/") strMonth = Left(strMonth,1); if (parseInt(strMonth) == test.getMonth()+1) return true; else return false; else return false; } // Right() and Left() JavaScript Functions Written by: // Scott Mitchell // mitchell@4guysfromrolla.com // http://www.4GuysFromRolla.com function Left(str, n) { if (n <= 0) return ""; // Invalid bound, return blank string else if (n > String(str).length) return str;// Invalid bound, return entire string else return String(str).substring(0,n); // Valid bound, return appropriate substring } function Right(str, n) { if (n <= 0) return ""; // Invalid bound, return blank string else if (n > String(str).length) return str; // Invalid bound, return entire string else { // Valid bound, return appropriate substring var iLen = String(str).length; return String(str).substring(iLen, iLen - n); } } </script> </head> <body> <h2> JavaScript Form Validation </h2> The form on this page is for showing form validation techniques. <BR> If you enter inappropriate data in the fields on this page you will immediately be prompted to correct it. <p><font color="#0000FF">Validation Rules in place are:<br> 1. Start Date must be a valid date.<br> 2. End Date must be a valid date.<br> 3. End Date must be equal to or later than Start Date.<br> 4. Number must be a valid number between 1 and 10</font><br> </p> <form name="form1"method="Post" action="ASP_Form_Validation_Page2.asp"onSubmit="return valForm();"> <div class="lbl">Start Date:</div><input type="Text"name="StartDate" value="<%=date()%>" size="12" onBlur="valStartDate(this.value);"> (MM/DD/YYYY)<font color="#FF0000"> Will cause error if not a date value (try and see) </font> <br> <div class="lbl">End Date:</div><input type="Text"name="EndDate" size="12"onBlur="valEndDate(this.value);"> (MM/DD/YYYY)<font color="#FF0000"> Will cause error if not a date value (try and see) </font> <br> <div class="lbl">Number:</div><input type="Text"name="NumberValue1"size="5" onBlur="valNumeric(this.value);">font color="#0000FF"><font color="#FF0000">Only Numbers 1 - 10 are valid here.</font> <br> <br> <input type="submit"value="Submit Form"name="btnSubmit"> </form> <p>When validating dates it is important to understand that the format of the date is very important. For example if we expect a date to be entered in MM-DD-YYYY format then 06/30/2004 is a valid date. However if we expect the date to be entered in DD-MM-YYYY format then the same value would be invalid. In our<a href="ASP_Form_Validation_Page1.asp"> ASP example</a> the validation happens on the server and uses the server's settings to determine date format. With JavaScript we will control what format or formats we are looking for. This is an important concept when working on sites that will be accessed by people who's standard date format may be different from what is the standard at the server.</p> <p>Although the JavaScript version is considerably more complex, it has the advantage that the information is validated immediately on entry rather than after the fact. The user will know they have made a mistake immediately rather than filling out an entire form and then being told of their mistake after the fact. The JavaScript method also allows you to place the user back in the correct field to fix their mistakes.</p> <p>In order to perform the validation we used the onBlur event of the textboxes. This works well enough, but it is possible to still enter the incorrect data and immediately submit the form by using the Enter key. To prevent this we use the onSubmit function of the form. We could simply use the onSubmit function and not the onBlur function, but that would remove our immediate response to erroneous entries.</p> </body> </html>