JS - Form Validator, Form Validation |
JS - Form Validator, Form Validation |
akforce |
Aug 8 2009, 11:17 AM
Post
#1
|
Group: Members Posts: 6 Joined: 30-July 09 Member No.: 9,277 |
i cant see to get my finger on the validation correctly, im trying to achieve that:
(*) Required fields are required in the final submission All other fields are validated by their content type But all fields without (*) Required are not needed for the form to be submitted http://www.on-media.co.uk/clients/hlmd/ http://www.on-media.co.uk/clients/hlmd/jscript/contact.js is the below code: CODE function formValidator(){ // Make quick references to our fields var name = document.getElementById('name'); var sname = document.getElementById('sname'); var phone = document.getElementById('phone'); var cell = document.getElementById('cell'); var calltime = document.getElementById('calltime'); var email = document.getElementById('email'); var address = document.getElementById('address'); var zip = document.getElementById('zip'); var loana = document.getElementById('loana'); var loanb = document.getElementById('loanb'); var balance = document.getElementById('balance'); // Check each input in the order that it appears in the form! if(isAlphabet(name, "Please enter only letters for your name")){ if(isAlphabet(sname, "Please enter only letters for your surname")){ if(isNumeric(phone, "please enter only numbers for your phone number")){ if(isNumeric(cell, "please enter only numbers for your cell number")){ if(madeSelection(calltime, "Please select a time for your callback")){ if(isAlphanumeric(address, "please enter your address in numbers and letters")){ if(isNumeric(zip, "Please enter a valid zip code")){ if(emailValidator(email, "Please enter a valid email address")){ if(isAlphanumeric(loana, "Please enter the value of your loan")){ if(isAlphanumeric(loanb, "Please enter the value of your loan")){ if(madeSelection(balance, "Select the duration you are behind on your loan re-payments")){ return true; } } } } } } } } } } } return false; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } function isNumeric(elem, helperMsg){ var numericExpression = /^[0-9]+$/; if(elem.value.match(numericExpression)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphabet(elem, helperMsg){ var alphaExp = /^[a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function isAlphanumeric(elem, helperMsg){ var alphaExp = /^[0-9a-zA-Z]+$/; if(elem.value.match(alphaExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } function madeSelection(elem, helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg); elem.focus(); return false; }else{ return true; } } function emailValidator(elem, helperMsg){ var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/; if(elem.value.match(emailExp)){ return true; }else{ alert(helperMsg); elem.focus(); return false; } } is my form: CODE <form onsubmit='return formValidator()' ><div id="contactfC"> <div id="contactf1"> <table width="240" border="0"> <tr> <td width="102"><span style="color:#F00;">*</span>Name:</td> <td width="108"><input name="name" type="text" id="name" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Surname:</td> <td><input name="sname" type="text" id="sname" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Phone Number:</td> <td><input name="phone" type="text" id="phone" size="15" /></td> </tr> <tr> <td>Cell Number:</td> <td><input name="cell" type="text" id="cell" size="15" /></td> </tr> <tr> <td>Best time to call:</td> <td><select name="calltime" id="calltime"> <option value="Morning">Morning</option> <option value="Afternoon">Afternoon</option> <option value="Evening">Evening</option> <option value="Anytime">Anytime</option> <option value="Please Choose" selected="selected">Please Choose</option> </select></td> </tr> <tr> <td>Address:</td> <td><textarea name="address" id="address" cols="15" rows="3"></textarea></td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </div> <div id="contactf2"> <table width="245" border="0"> <tr> <td width="133"><span style="color:#F00;">*</span>Zip Code:</td> <td width="118"><input name="zip" type="text" id="zip" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Email:</td> <td><input name="email" type="text" id="email" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>1st Loan Amount:</td> <td><input name="loana" type="text" id="loana" size="15" /></td> </tr> <tr> <td>2nd Loan Amount:</td> <td><input name="loanb" type="text" id="loanb" size="15" /></td> </tr> <tr> <td><span style="color:#F00;">*</span>Balance Past Due:</td> <td><select name="balance" id="balance"> <option value="One Month">1 Month</option> <option value="Two Months">2 Months</option> <option value="Three Months">3 Months</option> <option value="Four Months">4 Months</option> <option value="Five Months +">5 Months +</option> <option value="Not Applicable">N/A</option> <option value="Please Choose" selected="selected">Please Choose</option> </select></td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td><input type="submit" name="button" id="button" value="Submit" /></td> </tr> </table> </div> </div></form> i appricate any help thanks |
Lo-Fi Version | Time is now: 19th April 2024 - 04:46 PM |