sorciere
08-19-2003, 02:16 AM
I have a javascript project that I needed developed -
This project focuses on using JavaScript to perform form validation to make sure that the user enters all of the necessary data before submitting the form. This project also includes the use of multiple source files being used in one document to do a variety of tasks.
First a simple index.html page with links to two pages is needed. Please name these pages as follows:
*
int.html
*
us_ca.html
The int.html page will contain a form that international customers will fill out, the us_ca.html page will contain a form that U.S. and Canadian customers will fill out. You may download the forms here:
http://simplisticallycomplicated.biz/javascript/us_ca.html
http://simplisticallycomplicated.biz/javascript/int.html
You will also create two source files: nav_date.js and confirm.js which are described below. The total files for this project are:
*
int.html
*
us_ca.html
* index.html
* nav_date.js
* confirm.js
Using nav_date.js
On your index.html page you will add both browser-detection and print out the date. To do this, you will create a source file called nav_date.js which will contain the code to print out your browser-detect statement and to print out the date. Please note that when you call this source file you must call it after your <body> as this code will print out exactly where you call this script source. The nav_date.js source file will do these things:
*
Using the navigator object's appName property, create a switch, coming up with a unique statement for Netscape and for Internet Explorer. Please note that appName can be Microsoft Internet Explorer, Internet Explorer, IE, and MSIE, etc. Netscape will return as Netscape, it will also return as Gecko and Mozilla, depending on the version. Please come up with a unique statement, so you are not merely concatenanting in the appName. If you cannot determine the browser type, please come up with a default statement.
* Using the date object, print out today's date. The date must be in this format: April 21, 2003. You must use methods of the Date object (getMonth(), getDate() and getFullYear()) methods and use those methods to print out a formatted date. You cannot simply use this code var myDate = new Date(); document.write (myDate); - you must use var myDate = new Date(); and then use myDate to format the day name, month name, date and year.
Using confirm.js
You will also create a script source file called confirm.js. In this file you will code all of your functions. Both int.html and us_ca.html will call source file. For this script source, you must call the script source between your <head> and </head> tags.
You will perform form validation on both forms. When a user submits the form, you will check using a validation function.
The forms are different and different validation is performed because not every country uses postal codes, phone numbers look different in each country. Certain fields must be validated for valid data also as noted below.
Also, your source code (function definitions) must be in a separate JavaScript file, in the head tag <script src = "confirm.js"> </script>
In your source file, do not start out the code with <>, instead start
language = "JavaScript"
<!--
all of your code
//-->
You should use the same script file for both forms, but use different functions - one to check the US and Canadian form "uscaCheck()", and another to check the International form "intCheck()". You may also use other functions, for example to validate email, that is called by your main from validation functions.
Please use the onSubmit user even rather than the onClick user event. If you html looks like this: <form name = "login" onSubmit = "return intCheck()"> Then the form will not be submitted until Javascript reaches the keywords "return true" in the checkError function (you should also have "return false" and "return true" in that function, make sure you only have one "return true" and one "return false" per function).
On the US/Canadian form - the required fields are:
* First name - not empty
* Last name - not empty
* Address - not empty
* City - not empty
* State/Province - one has been selected
* Zip code - if select United States as their country, the zip code must have at least 5 numbers and check to see that they are numbers, if they Canada as their country, then just validate that the zip code is not empty
* Country - one has been selected
* Email address - validate to see if they have both a @ and a . in their email address and the string is at least 6 characters
* Agreement box checked - note that you cannot have the default be "checked", the user must actively check this
In addition, there are two optional fields that if the user fills them out, you must validate for appropriate fields
On the international form, the required fields are:
* Name - not empty
* Address (only the first line of the address is required, second is optional) - not empty
* City - not empty
* Country - one has been selected
* Email - validate to see if they have both a @ and a . in their email address and the string is at least 6 characters
* Agreement box checked - note that you cannot have the default be "checked", the user must actively check this
If they have forgotten to enter data into any of the required fields, or they have not entered valid data, a new window will pop open telling them exactly what they need to fill out (what required fields are missing).
The window should have the entire list of all the errors. For example, if they forgot to fill in their name and city, then the window should say "You forgot your name and city". The window should have a link or a button that enables the user to close the window. You may also use setTimeout to put a timer on the window closing. Either way, you must not rely on the x in the window for the user to close it.
The window will only open if there is a problem on the form, if everything checks out, then the form can be submitted and you can consider it done. The form does not have to go anywhere: you do not need to have an action tag for the form. If you would like, you can pop up an alert box saying "thanks for filling out my form"
Any help provided would be greatly appreciated -
Thanks!!!
This project focuses on using JavaScript to perform form validation to make sure that the user enters all of the necessary data before submitting the form. This project also includes the use of multiple source files being used in one document to do a variety of tasks.
First a simple index.html page with links to two pages is needed. Please name these pages as follows:
*
int.html
*
us_ca.html
The int.html page will contain a form that international customers will fill out, the us_ca.html page will contain a form that U.S. and Canadian customers will fill out. You may download the forms here:
http://simplisticallycomplicated.biz/javascript/us_ca.html
http://simplisticallycomplicated.biz/javascript/int.html
You will also create two source files: nav_date.js and confirm.js which are described below. The total files for this project are:
*
int.html
*
us_ca.html
* index.html
* nav_date.js
* confirm.js
Using nav_date.js
On your index.html page you will add both browser-detection and print out the date. To do this, you will create a source file called nav_date.js which will contain the code to print out your browser-detect statement and to print out the date. Please note that when you call this source file you must call it after your <body> as this code will print out exactly where you call this script source. The nav_date.js source file will do these things:
*
Using the navigator object's appName property, create a switch, coming up with a unique statement for Netscape and for Internet Explorer. Please note that appName can be Microsoft Internet Explorer, Internet Explorer, IE, and MSIE, etc. Netscape will return as Netscape, it will also return as Gecko and Mozilla, depending on the version. Please come up with a unique statement, so you are not merely concatenanting in the appName. If you cannot determine the browser type, please come up with a default statement.
* Using the date object, print out today's date. The date must be in this format: April 21, 2003. You must use methods of the Date object (getMonth(), getDate() and getFullYear()) methods and use those methods to print out a formatted date. You cannot simply use this code var myDate = new Date(); document.write (myDate); - you must use var myDate = new Date(); and then use myDate to format the day name, month name, date and year.
Using confirm.js
You will also create a script source file called confirm.js. In this file you will code all of your functions. Both int.html and us_ca.html will call source file. For this script source, you must call the script source between your <head> and </head> tags.
You will perform form validation on both forms. When a user submits the form, you will check using a validation function.
The forms are different and different validation is performed because not every country uses postal codes, phone numbers look different in each country. Certain fields must be validated for valid data also as noted below.
Also, your source code (function definitions) must be in a separate JavaScript file, in the head tag <script src = "confirm.js"> </script>
In your source file, do not start out the code with <>, instead start
language = "JavaScript"
<!--
all of your code
//-->
You should use the same script file for both forms, but use different functions - one to check the US and Canadian form "uscaCheck()", and another to check the International form "intCheck()". You may also use other functions, for example to validate email, that is called by your main from validation functions.
Please use the onSubmit user even rather than the onClick user event. If you html looks like this: <form name = "login" onSubmit = "return intCheck()"> Then the form will not be submitted until Javascript reaches the keywords "return true" in the checkError function (you should also have "return false" and "return true" in that function, make sure you only have one "return true" and one "return false" per function).
On the US/Canadian form - the required fields are:
* First name - not empty
* Last name - not empty
* Address - not empty
* City - not empty
* State/Province - one has been selected
* Zip code - if select United States as their country, the zip code must have at least 5 numbers and check to see that they are numbers, if they Canada as their country, then just validate that the zip code is not empty
* Country - one has been selected
* Email address - validate to see if they have both a @ and a . in their email address and the string is at least 6 characters
* Agreement box checked - note that you cannot have the default be "checked", the user must actively check this
In addition, there are two optional fields that if the user fills them out, you must validate for appropriate fields
On the international form, the required fields are:
* Name - not empty
* Address (only the first line of the address is required, second is optional) - not empty
* City - not empty
* Country - one has been selected
* Email - validate to see if they have both a @ and a . in their email address and the string is at least 6 characters
* Agreement box checked - note that you cannot have the default be "checked", the user must actively check this
If they have forgotten to enter data into any of the required fields, or they have not entered valid data, a new window will pop open telling them exactly what they need to fill out (what required fields are missing).
The window should have the entire list of all the errors. For example, if they forgot to fill in their name and city, then the window should say "You forgot your name and city". The window should have a link or a button that enables the user to close the window. You may also use setTimeout to put a timer on the window closing. Either way, you must not rely on the x in the window for the user to close it.
The window will only open if there is a problem on the form, if everything checks out, then the form can be submitted and you can consider it done. The form does not have to go anywhere: you do not need to have an action tag for the form. If you would like, you can pop up an alert box saying "thanks for filling out my form"
Any help provided would be greatly appreciated -
Thanks!!!