Description
Provides your form elements with error-checking capabilities using Javascript.
The function gives your form elements the capability to check your user’s input for legitimate input, and halts the submission process and gives your user a warning if the parameters do not fulfill the necessary conditions set by you.
Instructions
Code
First, create the form.
<form action="#" method="post" name="entry" onSubmit="return check(this)"> ... </form>
Create any form elements needed for your form in between the two tags above. The following are example snippets of each form element available to you.
<!-- Textboxes --> Name: <input type="text" name="name" maxlength="30" /><br /> Date: <input type="text" name="date" maxlength="10" /><br /> Age: <input type="text" name="age" maxlength="3" /><br /> Email: <input type="text" name="email" maxlength="40" /><br /> <!-- Radio Buttons --> Favorite Color? <br /> Red <input type="radio" name="color" value="red" /> Green <input type="radio" name="color" value="green" /> Blue <input type="radio" name="color" value="blue" /> Yellow <input type="radio" name="color" value="yellow" /><br /> <!-- Checkboxes --> Favorite Foods? <br /> Sushi <input type="checkbox" name="food" value="sushi" /> Pizza <input type="checkbox" name="food" value="pizza" /> Rice <input type="checkbox" name="food" value="rice" /> Ramen <input type="checkbox" name="food" value="ramen" /><br /> <!-- Dropdown Menu --> <select name="transportation"> <option value="">Choose Transporation</option> <option value="Car">Car</option> <option value="Bus">Bus</option> <option value="Plane">Plane</option> <option value="Bike">Bike</option> <option value="Walk">Walk!</option> </select><br /> <!-- List Menu --> <select name="footwear" size="5"> <option value="">Choose Footwear</option> <option value="shoes">Shoes</option> <option value="sneakers">Sneakers</option> <option value="loafers">Loafers</option> <option value="slipper">Slippers</option> <option value="socks">Socks!</option> </select><br /> <!-- Text area box --> Comments: <br /> <textarea name="notes" cols="35" rows="10" id="notes" />TESTING<br /> <!-- Submit Button --> <input type="submit" value="Submit"/>
Elsewhere, create the following (this may placed inside the or the tags).
<script language="javascript" type="text/javascript"> <!-- function check(form) { ... } --> </script>
Within the check(form) function, you may place any of the following code snippets based on the type of form elements you have placed on your web page. Keep in mind that the following code snippets check to see if the user filled in a value for each data input and does not check for proper input.
For:
- Textboxes
- Textareas
- List/Menus
Use the following:
1 2 3 4 5 |
if (document.NAMEOFFORM.NAMEOFELEMENT.value == null||document.NAMEOFFORM.NAMEOFELEMENT.value == "") { alert("Please enter the date."); return(false); } |
In line 1, replace NAMEOFFORM with the name of the form that uses the form element, and NAMEOFELEMENT with the name of the element within the form. In line 2, replace WARNING with any message you’d like to appear in the alert prompt. You may also incorporate different actions here in an event the user does not provide proper input.
For:
- Radio Buttons
- Checkboxes
Use the following:
1 2 3 4 5 6 7 8 9 10 11 |
flag = false; length = document.NAMEOFFORM.NAMEOFELEMENT.length; for (i = 0; i < length; i++) { if (document.NAMEOFFORM.NAMEOFELEMENT[i].checked) { flag = true; } } if (flag == false) { alert("WARNING"); return(false); } |
In line 2 and 4, replace NAMEOFFORM with the name of the form that uses the form element, and NAMEOFELEMENT with the name of the element within the form. In line 9, replace WARNING with any message you’d like to appear in the alert prompt. You may also incorporate different actions here in an event the user does not provide proper input.
You can use both these code snippets for as many elements in your form as you’d like. For a complete example:
<body> ... <script language="javascript" type="text/javascript"> <!-- function check(form) { /* Start NAME block */ if (document.entry.name.value == null||document.entry.name.value == "") { alert("Please enter your name."); return(false); } /* End NAME block */ /* Start DATE block */ if (document.entry.date.value == null||document.entry.date.value == "") { alert("Please enter the date."); return(false); } /* End DATE block */ /* Start AGE block */ if (document.entry.age.value == null||document.entry.age.value == "") { alert("Please enter your age."); return(false); } if (!(/[^a-z][0-9]{1,}[^a-z]/.test(document.entry.age.value))) { alert("Please enter numbers for your age"); return(false); } /* End AGE block */ /* Start EMAIL block */ if (document.entry.email.value == null||document.entry.email.value == "") { alert("Please enter your email."); return(false); } if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2,})$/i.test(document.entry.email.value))) { alert("Invalid Email"); return(false); } /* End EMAIL block */ /* Start COLOR block */ flag = false; length = document.entry.color.length; for (i = 0; i < length; i++) { if (document.entry.color[i].checked) flag = true; } if (flag == false) { alert("Please choose a color"); return(false); } /* End COLOR block */ /* Start FOOD block */ flag = false; length = document.entry.food.length; for (i = 0; i < length; i++) { if (document.entry.food[i].checked) flag = true; } if (flag == false) { alert("Please choose a food item"); return(false); } /* End FOOD block */ /* Start TRANSPORTATION block */ if (document.entry.transportation.value == "" || document.entry.transportation.value == null) { alert("Choose your method of transportation"); return(false); } /* End TRANSPORTATION block */ /* Start FOOTWEAR block */ if (document.entry.footwear.value == "") { alert("Choose your footwear"); return(false); } /* End FOOTWEAR block */ /* Start NOTES block */ if (document.entry.notes.value == null||document.entry.notes.value.length < 5) { alert("Add more to your comments"); return(false); } /* End NOTES block */ } --> </script> <form action="#" method="post" name="entry" onSubmit="return check(this)"> <!-- Textboxes --> Name: <input type="text" name="name" maxlength="30" /><br /> Date: <input type="text" name="date" maxlength="10" /><br /> Age: <input type="text" name="age" maxlength="3" /><br /> Email: <input type="text" name="email" maxlength="40" /><br /> <!-- Radio Buttons --> Favorite Color? <br /> Red <input type="radio" name="color" value="red" /> Green <input type="radio" name="color" value="green" /> Blue <input type="radio" name="color" value="blue" /> Yellow <input type="radio" name="color" value="yellow" /><br /> <!-- Checkboxes --> Favorite Foods? <br /> Sushi <input type="checkbox" name="food" value="sushi" /> Pizza <input type="checkbox" name="food" value="pizza" /> Rice <input type="checkbox" name="food" value="rice" /> Ramen <input type="checkbox" name="food" value="ramen" /><br /> <!-- Dropdown Menu --> <select name="transportation"> <option value="">Choose Transporation</option> <option value="Car">Car</option> <option value="Bus">Bus</option> <option value="Plane">Plane</option> <option value="Bike">Bike</option> <option value="Walk">Walk!</option> </select><br /> <!-- List Menu --> <select name="footwear" size="5"> <option value="">Choose Footwear</option> <option value="shoes">Shoes</option> <option value="sneakers">Sneakers</option> <option value="loafers">Loafers</option> <option value="slipper">Slippers</option> <option value="socks">Socks!</option> </select><br /> <!-- Text area box --> Comments: <br /> <textarea name="notes" cols="35" rows="10" id="notes" />TESTING<br /> <!-- Submit Button --> <input type="submit" value="Submit"/> </form> ... </body>
Optional
You may incorporate other conditions when you validate your form using regular expressions. For example, to check to make sure the user puts in a properly formatted email address:
/* Start EMAIL block */ if (document.entry.email.value == null||document.entry.email.value == "") { alert("Please enter your email."); return(false); } if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*\.(\w{2,})$/i.test(document.entry.email.value))) { alert("Invalid Email"); return(false); } /* End EMAIL block */
It is advised that you can use this feature after you validate the field for a proper value. Refer to the completed example above for more examples.
