goldy300
New Member
- Messages
- 33
- Reaction score
- 0
- Points
- 0
I've got this code from somewhere and modified it a bit but its displaying an alert for everything even after the form is filled correctly.
You can see it work here: http://daniel.classroomonline.info/js_assessment/loggedin.htm
Heres what I need to do and perhaps there is an easier way to do this.
The validation must consist of at least the following components
·[FONT="] [/FONT]Numeric validation
·[FONT="] [/FONT]Length of field validation
·[FONT="] [/FONT]Date validation
·[FONT="] [/FONT]Compulsory field validation
HTML objects being validated must consist of at least one instance of EACH OF text boxes, selection lists, radio button and check boxes. A postcode and email address must be two of the fields that are validated.
Appropriate error messages for each problem should be displayed.
In addition, the cursor must be returned to the field that contains the first error. Include a reset button to clear all the form fields.
You can see it work here: http://daniel.classroomonline.info/js_assessment/loggedin.htm
Heres what I need to do and perhaps there is an easier way to do this.
The validation must consist of at least the following components
·[FONT="] [/FONT]Numeric validation
·[FONT="] [/FONT]Length of field validation
·[FONT="] [/FONT]Date validation
·[FONT="] [/FONT]Compulsory field validation
HTML objects being validated must consist of at least one instance of EACH OF text boxes, selection lists, radio button and check boxes. A postcode and email address must be two of the fields that are validated.
Appropriate error messages for each problem should be displayed.
In addition, the cursor must be returned to the field that contains the first error. Include a reset button to clear all the form fields.
HTML:
<script type='text/javascript'>
function Validate(){
// Creating variable for field names
var firstname = document.getElementById('firstname');
var addr = document.getElementById('addr');
var postcode = document.getElementById('postcode');
var state = document.getElementById('state');
var username = document.getElementById('username');
var email = document.getElementById('email');
var thedate = document.getElementById('txtDate');
if(isAlphabet(firstname, "Please enter only letters for your name")){ // checks for alphabetical letters only
if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){ // check for both alphabetic and numeric characters only
if(isNumeric(postcode, "Please enter a valid postcode code")){ // check for numeric characters only
if(madeSelection(state, "Please Choose a State")){// checks if a selection is made
if(lengthRestriction(username, 6, 8)){ // checks the username is between 6 and 8 characters
if(emailValidator(email, "Please enter a valid email address")){ //checks if is a valid email address
if(dateValidator(thedate,"Please enter valid date")){ // checks for valid date and correct format
return true;
}
}
}
}
}
}
}
return false;
}
// below are all the individual functions that test for valid input of each field in the forms
//checks that an element is not empty, this isnt used anywhere that I can see
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
//this one checks to make sure the inout is only numbers 0-9
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
//alert(elem.value)
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//this one tests for letters, either uppercase or lowercase and will also allow a space since full name is asked for
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z\s]+$/;
//alert(elem.value)
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
//this one is used to test for letters and numbers and is used for the address
function isAlphanumeric(elem, helperMsg){
alert(elem.value)
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
/*this one is used to check for a valid length and is applied to the username where 6-8 characters are required, the min & max are set in the if statements at the top */
function lengthRestriction(elem, min, max){
alert(elem.value)
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}
//this one checks whether the user has made a selection from the drop downs, if it is still set on please choose then they havent
function madeSelection(elem, helperMsg){
alert(elem.value)
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
/*this one evaluates whether the email is the correct format for an email eg. username, @ symbol and dot and anyother variation or letters and numbers */
function emailValidator(elem, helperMsg){
alert(elem.value)
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;
}
}
//this one validates the correct date format has been entered as requested
function dateValidator(elem, helperMsg){
alert(elem.value)
var dateExp = /^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d$/ ;
if(elem.value.match(dateExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
