»
EnglishFrenchVietnamese

Print - Extreme Form Field Validator - JavaScriptBank.com

Full version: jsB@nk » Form » Validation » Extreme Form Field Validator
URL: http://www.javascriptbank.com/extreme-form-field-validator.html

Extreme Form Field Validator © JavaScriptBank.comHandle and precess all of your form field validations using just one script. This JavaScript can verify numeric strings; monitor the status of the CapsLock state; verify empty strings, numeric, date, alphabetical, or e-mail fields value; confirm passwords; verify the formatting of phone numbers; monitor the minimum/maximum numbers of form input characters. Includes language-independent error messages and displays error messages in a div or using an alert box.

Full version: jsB@nk » Form » Validation » Extreme Form Field Validator
URL: http://www.javascriptbank.com/extreme-form-field-validator.html



CSS
<style>#errordiv {  border: 1px solid red;  background-color: #FFAFAF;  display: none;  width: 50%;  margin: 5px;  padding: 5px;}.required {  background-color: #CC4444;}.required:focus {  background-color: #fff;  border: 1px solid #f00;}.checkit {  background-color: #E0E5EF;}</style>


JavaScript
<script type="text/javascript" src="chkform.js"></script><script type="text/javascript">function configureValidation(f,alerttype){  f.firstname.isAlphaNumeric = true;  f.lastname.isAlphaNumeric = true;  f.email.isEmail = true;  f.phone.isPhoneNumber = true;  f.birthday.isDate = true;  f.postalcode.isEmpty = true;  f.password1.isLengthBetween = [4,255];  f.password2.isMatch = f.password1.value;  f.comments.optional = true;  var preCheck = (!f.infohtml.checked && !f.infocss.checked && !f.infojs.checked) ? errormsg[0] : null;  return validateForm(f, preCheck, 'required', alerttype);}</script>


HTML
<div><form action="#" method="post" onsubmit="return configureValidation(this,3)" onreset="confirm(errormsg[99])"><table class="formtable"><tr><td>First Name:</td><td><input class="checkit" type="text" id="First name" name="firstname" value="" class="text"></td></tr><tr><td>Last Name:</td><td><input class="checkit" type="text" id="Last name" name="lastname" value="" class="text"></td></tr><tr><td>Email:</td><td><input class="checkit" type="text" id="Email" name="email" value="" class="text"></td></tr><tr><td>Email Preferred:</td><td><select name="emailpreferred"><option value="text">Text</option><option value="html">HTML</option><option value="flash">Flash</option></select></td></tr><tr><td>Phone: (US only) </td><td><input class="checkit"  type="text" id="Phone" name="phone" value="000-000-0000" class="text"></td></tr><tr><td>Birthday:</td><td><input class="checkit"  type="text" id="Birthday" name="birthday" value="mm-dd-yyyy" class="text"></td></tr><tr><td>Gender:</td><td>Male:<input type="radio"  name="gender" value="male" class="radio" checked="checked"> Female:<input type="radio" name="gender" value="female" class="radio"></td></tr><tr><td>Password:</td><td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password" type="password" name="password1" value="" class="text"></td></tr><tr><td>Re-Enter:</td><td><input class="checkit" onKeyPress="checkCapsLock( event )" id="Password again" type="password" name="password2" value="" class="text"></td></tr><tr><td>Postal Code</td><td><input class="checkit" name="postalcode" type="text" id="Postal code" onKeyPress="javascript:checkNumber(this);" onKeyUp="javascript:checkNumber(this);"></td></tr><tr><td colspan="2">Select one or more of the following:</td></tr><tr><td colspan="2">HTML:<input type="checkbox" name="infohtml" value="true" class="checkbox"> CSS:<input type="checkbox" name="infocss" value="true" class="checkbox"> JavaScript:<input type="checkbox" name="infojs" value="true" class="checkbox"></td></tr><tr><td>Comments:</td><td><textarea id="Comment" name="comments" class="text" cols="20" rows="4"></textarea></td></tr></table><div id="errordiv"> </div><div><input type="submit" name="submit" value="Submit" class="button"> <input type="reset" name="reset" value="Reset" class="button"></td></form></div>


Files
/javascript/form/Extreme_Form_Field_Validator/chkform.js