...

View Full Version : Form validation question



fezza
06-18-2004, 02:20 PM
Hello.

I know less than nothing about Javascript. :o

But I am would like to use it to validate a very simple form.

The form contains a few text boxes, a drop-down menu and one checkbox. I need all of these completed/ticked before the form is submitted.

Could someone tell me either :
a) how I do this
b) where the best place to learn how to do this is

Grateful for any help. Thankyou.

glenngv
06-18-2004, 02:29 PM
http://www.peterbailey.net/fValidate/

Willy Duitt
06-18-2004, 02:31 PM
Here is a nice little form validator script for you. It validates all form elements, inputs, selects and textareas, also radio button groups and checkboxes:



<html>
<head>
<title>Test</title>
<script type="text/javascript">
// form validator by Justin Case

function alertField(form, f){
var fname;
if(typeof(f) == 'string') fname = f;
else fname = f.name;
fname = fname.charAt(0).toUpperCase() + fname.substring(1, fname.length);
alert('Please enter a value in '+fname);
if(typeof(f) !== 'string'){
f.focus();
return false;
}
for(var i = 0; i < form.elements.length; i++){
if(form.elements[i].name && form.elements[i].name == f){
form.elements[i].focus();
return false;
}
}
}

function validateForm(form){
var radioGroups = new Array();
for(var i = 0; i < form.elements.length; i++){
if((form.elements[i].tagName.toLowerCase() == 'select' ||
form.elements[i].tagName.toLowerCase() == 'textarea' ||
(form.elements[i].tagName.toLowerCase() == 'input' &&
(form.elements[i].type.toLowerCase() == 'text' ||
form.elements[i].type.toLowerCase() == 'file'))) &&
form.elements[i].className.indexOf('notRequired') < 0 &&
form.elements[i].value == ''){
alertField(form, form.elements[i]);
return false;
}
else if(form.elements[i].className.indexOf('checkEmail') >= 0 &&
form.elements[i].value !== '' &&
form.elements[i].value.match(/^([\w\-]+\.?)+\@([\w\-]+\.{1})+(com|net|org|edu|int|mil|gov|biz|info|aero|museum|name|coop|\w{2})$/) == null){
alert('Please enter a valid email address.');
form.elements[i].focus();
return false;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'checkbox' &&
form.elements[i].className.indexOf('notRequired') < 0 &&
!form.elements[i].checked){
alert('You need to agree to our TOS.');
form.elements[i].focus();
return false;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'radio' &&
!radioGroups[form.elements[i].name] &&
radioGroups[form.elements[i].name] !== null &&
form.elements[i].className.indexOf('notRequired') < 0){
var t = (form.elements[i].checked)? true : null;
radioGroups[form.elements[i].name] = t;
}
else if(form.elements[i].tagName.toLowerCase() == 'input' &&
form.elements[i].type.toLowerCase() == 'radio' &&
(radioGroups[form.elements[i].name] ||
radioGroups[form.elements[i].name] == null) &&
form.elements[i].className.indexOf('notRequired') < 0){
if(form.elements[i].checked) radioGroups[form.elements[i].name] = true;
}
}
for(var i in radioGroups){
if(!radioGroups[i]){
alertField(form, i);
return false;
}
}
return true;
}

</script>
</head>
<body>

<form method="post" action="about:blank" onsubmit="return validateForm(this);">
NAME: <input type="text" name="name"><br>
EMAIL: <input type="text" name="email" class="checkEmail"><br>
SUBJECT: <input type="text" name="subject"><br>
COMMENT:<br><textarea cols="44" rows="12" name="comments"></textarea><br>

OPINION:<br><input type="radio" name="opinion" value="good"> Good<br>
<input type="radio" name="opinion" value="ok"> Ok<br>
<input type="radio" name="opinion" value="bad"> Bad<br><br>

AGREE TO TOS: <input type="checkbox" name="tos"><br><br>

<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

If some field isn't required, add class="notRequired" to its tag. If it is an email field and you would like the email address validated, add class="checkEmail" to it. If you want both, not required and address check, use class="notRequired checkEmail". Use the notRequired class name on a checkbox if you don't require it checked. If you don't require any value chosen in a radio group, add the notRequired class name to every radio group item.

Kor
06-18-2004, 02:52 PM
The principle is this
Use onsubmit as event handler, call a verify function with a return condition, focus the element and return false if the condition is/is not fulfiled, elese return true



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function verify(f){
e=f.elements;
for(var i=0;i<e.length;i++){

if(e[i].type=='text'){
if(e[i].value==''){
alert('You must enter some value in the text field');
e[i].focus();
return false
}
}

if(e[i].name=='sel'){
if(e.selectedIndex==0){
alert('You must select a value in select field');
e[i].focus();
return false
}
}
if(e[i].type=='checkbox'){
if(!e[i].checked){
alert('You must check the checkbox');
return false
}
}
}
return true
}
</script>
</head>

<body>
<form onsubmit="return verify(this)">
<input type="text"><br>
<input type="text"><br>
<select name="sel">
<option>--select--</option>
<option>one</option>
<option>two</option>
</select><br>
<input type="checkbox" value=""><br>
<input name="Submit" type="submit" value="Submit">
</form>
</body>
</html>

fezza
06-18-2004, 02:59 PM
Willy Duitt -

thankyou so much.

That is exactly - I mean exactly - what I was looking for.

At least now I can read through it and try to start understand how it all works.

Thanks again. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum