|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
 |
|
|
|
|
|||||||||
|
|||||||||
|
|||||||||
| |
|||
|
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Display Modes |
Dev Articles Community Forums Sponsor:
|
|
|
|
#1
May 25th, 2007, 12:30 AM
|
|||
|
|||
|
Need Help Debugging Script/Error in Script - Code desing - logic issue?
I am doing an form validation exercise(self-designed). I used JavaScript to validate the user input.
The form is designed for students to regiester accounts available at university's computing center. I have textfields, textarea, radio buttons, checkboxes, selection list(drop-down)list. The validation process took place when user click submit button (I used onSubmit event handler to call form_validation function) HTML code: Code:
<form name="account_form" id="account_form" action="" method ="post" onSubmit="return form_validation()"> I used a for loop to go through each element on the form, inside for loop I have a switch statement that calls validation function based on the NAME attribute of the element. Each individual validation function will return true or false back to switch statement where a boolen varible validatedOK will store the result. JavaScrpt code: Code:
for(var i = 0; i<(elements.length - 2); i++)
{
switch(elements[i].name)
{
case "fname":
validatedOK= checkFirstName(first_name_field); //pass a reference to first name field to function
break;
.....//other case statements
case "class":
validatedOK= checkAccountStatus(frm);
break;
case "grad_account":
//skip checkbox verification for enable/disable checkbox purpose
break;
default:
alert("no such element exist on the form");
break;
}
//after the switch statement if return value for
//validatedOk is false call a function to return false to html file
//so form won't get submitted
if (!validatedOK)
{
return false;
}
//increment the counter, when all the elements on the form
//has passed validation test, call same function
//return 'true' to html file, so form can be submitted
else
{
checked_counter++; //when checked_counter equals to elements.length - 2
//this means every field has passed validation test
if (checked_counter == elements.length - 2)
{
var status = true;
return status;
}
}
}//end of for loop
/*
function checkAccountStatus
enable/disable graduate account(checkboxes) - base on radio button selection
*/
function disableGraduateAccount(frm)
{
for(var k = 0; k < frm.grad_account.length; k++)
{
frm.grad_account[k].disabled = true;
}
}
function enableGraduateAccount(frm)
{
for(var j = 0; j < frm.grad_account.length; j++)
{
frm.grad_account[j].disabled = false;
}
}
//frm represent form object that contains the under_graduate radio button
function checkAccountStatus(frm)
{
with(document.account_form)
{
var classCtr = -1;
for(var i = 0; i < class.length; i++)
{
if(class[i].checked && class[i].value == 'under_graduate')
{
classCtr = i;
disableGraduateAccount(frm)
}
else if(class[i].checked && class[i].value == 'graduate')
{
classCtr = i;
enableGraduateAccount(frm);
}
}
if(classCtr == -1)
{
alert("you must select either Undergraduate or Graduate radio button.");
return false;
}
else
return true;
}//end of with statement
}
My problem occured when I need to enable/disable computer accounts (represented by checkboxes) for graduate students. Enable/disable action are based on radio button selection. If user select undergraduate radio button, program should disable the computer accounts for graduate student. If user selet graduate student button, program should enable computer accouts for graduate student. I called validation function check_account status by using onclick event handler in radio button section HTML code: Code:
<input type="radio" name="class" id="under_graduate" value="under_graduate" onclick="checkAccountStatus(this.form)" />Undergraduate student <input type="radio" name="class" id="graduate" value="graduate" onclick="checkAccountStatus(this.form)" />Graduate student<br /><br /> a) But by solving problem this way I bypassed the switch statement. My purpose is to stop form submission if there is a validation error. Firfox javascript cosole complained after user submit form that 'frm' is not defined Code:
case "class":
validatedOK= checkAccountStatus(frm);
break;
b)I am also confused should I return the boolean value back to switch statement.The only case to return false is user didn't select either graduate or undergraduate radio button. I hope I explained my problem clearly. Please check my code and give me some suggestions so that I can used switch statement to handle enable /disable checkboxes and have boolean value reurned corretly to onSubmit event handler. Thanks for reading my post. I appreciate your patience and help! P.S. I final step for this exercise is to use PHP to send out a confirmation email that contains user's a account information from the from. jscripter07 5-24-07
|
|
#2
May 25th, 2007, 05:10 AM
|
||||||
|
||||||
|
Well, the variable frm is indeed not defined at the place where you call checkAccountStatus(). I assume frm needs to be filled with data from the form, you need to do this BEFORE passing it as an argument to a function.
However, I'm indeed not entirely clear as to your objective and methods. Could you post the entire code for the script (including HTML)?
__________________
This is my code. Is it not nifty? "The biggest problem encountered while trying to design a system that was completely foolproof, was, that people tended to underestimate the ingenuity of complete fools." ---Douglas Adams Join the Itsacon fanclub! Zero Tolerance: Spammers banned so far: 275
 
|
|
#3
May 28th, 2007, 12:01 AM
|
|||
|
|||
|
my entrie script code
Quote:
Hello Itsacon: Thanks for pointing out my error. I modified my code it's working for check graduate student accounts. But I still have trouble to figure out how to handle radio button(undergraduate and graduate student) selection and check box selection (graduate student accounts) inside the switch statement. I called validation function by using onclick event handler for radio button and graduate account checkbox selection. I found out that verify radio button selection and enable/disable graduate student account should took place before form being submitted(before user click submit button) My switch statement suppose to call each validation function based on the NAME attribute of the element, then return false, if there is a validation error. If all elements passed validation test, I am going to return true, so form will be submitted. HTML code: Code:
<html>
<head>
<title>form validation-name field</title>
<script src="form_validation.js" type="text/javascript"></script>
</head>
<body onload="document.account_form.fname.focus()">
<form name="account_form" id="account_form" action="" method ="post" onSubmit="return form_validation()">
First Name: <input type="text" name="fname" id="fname" value="" maxlength="20"><br /><br />
Last Name: <input type="text" name="lname" id="lname" value="" maxlength="20"><br /><br />
age: <input type="text" name="age" id="age" value="" maxlength="3"><br /><br />
<input type="radio" name="gender" id="maleR" value="male" />Male <br /><br />
<input type="radio" name="gender" id="femaleR" value="female" />Female <br /><br />
<!-- selection list ----------------------->
<select name="departments" id="departments">
<option value="none">select your department</option>
<option value="art">Arts</option>
<option value="bio">Biology</option>
<option value="cs">Computer Science</option>
<option value="eng">English</option>
<option value="math">Mathematics</option>
<option value="geology">Geology</option>
<option value="history">History</option>
<option value="physics">Physics</option>
</select><br /><br />
Email <input type="text" name="email" id="email" size="30" maxlength="30" /><br /><br />
Phone Number <input type="text" name="phone_num" id="phone_num" size="14" maxlength="14" />
(enter a phone number like 4084445566)<br /><br />
<!--
account selection - undergraduate or graduate students
enable/disable graduate account(checkboxes) - base on radio button selection
-->
<!-- onclick="return checkAccountStatus(this.form)" -->
<input type="radio" name="class" id="under_graduate" value="under_graduate" onclick="checkAccountStatus(this.form)" />Undergraduate student
<input type="radio" name="class" id="graduate" value="graduate" onclick="checkAccountStatus(this.form)" />Graduate student<br /><br />
<p>Accounts for All Student</p>
<input type="checkbox" name="undergrad_account" id="undergrad_account1" value="dial_up" />Dial Up<br />
<input type="checkbox" name="undergrad_account" id="undergrad_account2" value="pc_lab" />Computer Lab<br />
<input type="checkbox" name="undergrad_account" id="undergrad_account3" value="music_movie" />Music/Movie Download<br /><br />
<p>Accounts for Graduate Student Only</p>
<input type="checkbox" name="grad_account" id="grad_account1" value="dsl_account" onclick="checkGraduateAccount(this.form)" />DSL Account<br />
<input type="checkbox" name="grad_account" id="grad_account2" value="unix_account" onclick="checkGraduateAccount(this.form)" />Unix Account<br />
<input type="checkbox" name="grad_account" id="grad_account3" value="web_host" onclick="checkGraduateAccount(this.form)" />Web Hosting<br />
<input type="checkbox" name="grad_account" id="grad_account4" value="list_server" onclick="checkGraduateAccount(this.form)" />List Server
<p>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</p>
</form>
</body>
</html>
JavaScript for Validation: Code:
function form_validation()
{
//check to see how many elements are on the form
alert(document.account_form.elements.length);
var validatedOK=""; //boolean variable used for return to calling html file
var checked_counter = 0; //use checked_counter to count how many elements on the form
//has passed validation test
with(document.account_form)
{
//note first_name_field is a reference to first name field
var first_name_field = document.getElementById("fname");
//alert(first_name_field.value);
var last_name_field = document.getElementById("lname");
var age_field = document.getElementById("age");
var male_field = (document.getElementById("maleR"));
var female_field = (document.getElementById("femaleR"));
var phone_field = (document.getElementById("phone_num"));
//for loop iteration based on how many elements on the form
// elements.length - 2 you don't want to check last 2
//elements on the form - submit and reset button
for(var i = 0; i<(elements.length - 2); i++)
{
switch(elements[i].name)
{
case "fname":
validatedOK= checkFirstName(first_name_field); //pass a reference to first name field to function
break;
case "lname":
validatedOK= checkLastName(last_name_field);
break;
case "age":
validatedOK= checkAge(age_field);
break;
case "gender":
validatedOK= checkGender();
break;
case "departments":
validatedOK= checkDept();
break;
case "email":
validatedOK= checkEmail();
break;
case "phone_num":
validatedOK= checkPhone(phone_field);
break;
case "class":
validatedOK= checkAccountStatus();
break;
case "undergrad_account":
break;
case "grad_account":
//skip checkbox verification for enable/disable checkbox purpose
break;
default:
alert("no such element exist on the form");
break;
}
//after the switch statement if return value for
//validatedOk is false call a function to return false to html file
//so form won't get submitted
if (!validatedOK)
{
return false;
}
//increment the counter, when all the elements on the form
//has passed validation test, call same function
//return 'true' to html file, so form can be submitted
else
{
checked_counter++; //when checked_counter equals to elements.length - 2
//this means every field has passed validation test
if (checked_counter == elements.length - 2)
{
var status = true;
return status;
}
}
}//end of for loop
}//end of with statement
}//end of form_validation function
function checkFirstName(elementReference)
{
if(elementReference.value == "")
{
alert("First Name field is blank");
return false;
}
else if(elementReference.value.length < 2 || elementReference.value.length > 15)
{
alert("First Name field should between 2 to 15 characters");
return false;
}
else
return true;
}
function checkLastName(elementReference)
{
if(elementReference.value == "")
{
alert("Last Name field is blank");
return false;
}
else if(elementReference.value.length < 2 || elementReference.value.length > 15)
{
alert("Last Name field should between 2 to 15 characters");
return false;
}
else
return true;
}
/* ------ Function checkAge ------------------- */
function checkAge(elementReference)
{
var ageStr = elementReference.value;
var temp;
var age="";
var number_count = 0;
var strAge="";
//use for loop to go through the string get from name text field
for(var i = 0; i < ageStr.length; i++)
{
temp = ageStr.charAt(i);
if(!isNaN(temp)) //filter out character data in string keep the digits
{
age +=temp;
number_count++;
}
else
{
strAge += temp; //concatenate all characters in the string to strAge
}
}
//parse string into integer use Number function;
var intAge = Number(age);
//test to see if age field left blank
if(ageStr == "")
{
alert("age field is blank, please fill out the age field");
return false;
}
//cases to handle user's entry is characters only
else if(number_count == 0 && ageStr.length == 1)
{
alert( strAge + " is an invalid entry. Please enter a number");
return false;
}
else if(number_count == 0 && ageStr.length == 2)
{
alert( strAge + " is an invalid entry. Please enter a number");
return false;
}
else if(number_count == 0 && ageStr.length == 3)
{
alert( strAge + " is an invalid entry. Please enter a number");
return false;
}
//test number entered by user is between 10 and 99
//when age field is left blank intAge became 0,
else if(intAge < 10 || intAge > 99)
{
alert ("please enter an age between 10 and 99");
return false;
}
else
return true;
}//end of function checkAge()
/* ------ Function checkGender ------------------- */
function checkGender()
{
var genderCtr = -1;
with(document.account_form)
{
var maleRadioButton = (document.getElementById("maleR"));
var femaleRadioButton = (document.getElementById("femaleR"));
for(var i = 0; i < gender.length; i++)
{
if(gender[i].checked)
{
genderCtr = i;
}
}
if(genderCtr == -1)
{
alert("you must select either male or female");
return false;
}
else
return true;
}//end of with statement
}
/* ------ Function checkDept ------------------- */
function checkDept()
{
with(document.account_form)
{
var choice =""
var choiceCtr = -1;
for(var i = 0; i < departments.options.length; i++)
{
choice = departments.options[i];
//skip default selected item in option list
if(i == 0 && choice.selected)
continue;
else if(choice.selected)
choiceCtr = i;
}
if(choiceCtr == -1)
{
alert("you must select one department from the drop down menu.");
return false;
}
else
return true;
}//end of with statement
}
/* function checkEmail */
function checkEmail()
{
with(document.account_form)
{
var at = "@";
var dot =".";
var lat = email.value.indexOf(at);
var lstr = email.value.length;
var ldot = email.value.indexOf(dot);
var suffix = email.value.substring(email.value.lastIndexOf(dot) +1);
if(!email.value)
{
alert("You left email address field blank. Please fill in your email address.");
return false;
}
//test three cases:
//a) eamil address doesn't contain '@' sign
//b)email address contain only '@'
//c) '@' sign is at the end of the string
else if(lat == -1 || lat == 0 || lat == (lstr - 1) )
{
alert("you entered check @ statement");
alert("Email address is incomplete or invalid? corret email address format--(E-Mail address blocked: See forum rules).");
return false;
}
/*test three cases:
* a) email address string doesn't contain dot sign
* b) email address string contain dot sign at the very begining of the string
* c) email address string contain dot sign at the very end
*
*/
else if(ldot == -1 || ldot == 0 || ldot == (lstr - 1) )
{
alert("you entered check dot statement");
alert("Email address is incomplete or invalid? corret email address format--(E-Mail address blocked: See forum rules).");
return false;
}
/* test to ensure there should be only one '@' in the email string */
else if( email.value.indexOf(at, lat + 1) != -1 )
{
alert("There should be only one '@' sign in your email address");
return false;
}
/* test if dot sign apper in right position in email address
substring(lat-1,lat) --> detect if dot appears right before @ sign
// ?? str.substring(lat+1,lat+2) -- detect if dot appears right after @ sign
not quite sure how str.substring(lat+1,lat+2)
*/
else if (email.value.substring(lat-1,lat)== dot || email.value.substring(lat+1,lat+2)== dot)
{
alert("the dot sign appeared in wrong position in eamil address");
return false;
}
/*
search two character position after @ sign, if not dot sign found return false
//??not sure how this one works
*/
else if (email.value.indexOf(dot,(lat+2))== -1)
{
alert("dot sign didn't show after two character position after @ sign");
return false;
}
//detect white space in it
else if (email.value.indexOf(" ")!= -1)
{
alert("email address can not contain white space in it");
return false;
}
//check for valid suffix for domain name
else if(suffix.length != 2 && suffix != 'com' && suffix != 'net' && suffix != 'org'
&& suffix != 'edu' && suffix != 'int' && suffix != 'mil' && suffix != 'gov' && suffix != 'arpa'
&& suffix != 'biz' && suffix != 'aero' && suffix != 'name' && suffix != 'coop' && suffix != 'info'
&& suffix != 'pro' && suffix != 'museum')
{
alert("invalid primary domain in email address");
return false;
}
else
return true;
}//end of with statement
}
/* function checkPhone */
function checkPhone(elementReference)
{
with(document.account_form)
{
var phone_num = elementReference.value
var numPattern = /^\d{3}\d{3}\d{4}$/;
var mathedOK = phone_num.value.match(numPattern);
if(!phone_num)
{
alert("you left phone field blank. please enter a valid phone number like 408-555-6677");
return false;
}
else if(!mathedOK)
{
alert("you entered invalid phone number. please enter a valid phone number like 408-555-6677");
return false;
}
return true;
}//end of with statement
}
/*
function checkAccountStatus
enable/disable graduate account(checkboxes) - base on radio button selection
*/
function disableGraduateAccount(frm)
{
for(var k = 0; k < frm.grad_account.length; k++)
{
frm.grad_account[k].disabled = true;
}
}
function enableGraduateAccount(frm)
{
for(var j = 0; j < frm.grad_account.length; j++)
{
frm.grad_account[j].disabled = false;
}
}
//frm represent form object that contains the under_graduate radio button
function checkAccountStatus(frm)
{
with(document.account_form)
{
var classCtr = -1;
for(var i = 0; i < class.length; i++)
{
if(class[i].checked && class[i].value == 'under_graduate')
{
classCtr = i;
disableGraduateAccount(class[i].form)
}
else if(class[i].checked && class[i].value == 'graduate')
{
classCtr = i;
enableGraduateAccount(class[i].form);
}
}
if(classCtr == -1)
{
alert("you must select either Undergraduate or Graduate radio button.");
return false;
}
else
return true;
}//end of with statement
}
/*
function checkGraduateAccount
*/
function checkGraduateAccount(frm)
{
var gradAccountCtr = 0;
for(var i = 0; i < frm.grad_account.length; i++)
{
if(frm.grad_account[i].checked)
{
gradAccountCtr++;
}
}
if(gradAccountCtr > 2)
alert("graduate students can select only two accounts.");
}
Please give me some suggestion on how to handle radio button selection for undergraduate and graduate student; and plus graduate student account insdie switch statement. Thanks for your help! jscripter07 5-27-07
|
|
| Viewing: Dev Articles Community Forums > Programming > JavaScript Development > Need Help Debugging Script/Error in Script - Code desing - logic issue? |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
