PDA

View Full Version : Form Validation

ozz
03-22-2003, 02:25 PM
I am trying to validate a short form. I have done the basic validation which returns an error message if the field is left blank, however I would also like a warning if the e-mail field is not a blank@blank.blank value and in the idnumber field i would like it only to accept numbers. Would appreciate a bit of help on this one please.




Heres what I have so far.

<html>

<head>
<title>New Page 1</title>

<script>

<!--
function validateform()
{
if(document.form1.name.value=="") {
window.alert ("Please Enter a Name!");
form1.name.focus();
return false;
}
if(document.form1.dept.value=="") {
window.alert ("Please Enter your Department!");
form1.dept.focus();
return false;
}
if (document.form1.email.value=="") {
window.alert ("Please Enter your E-Mail Address!");
form1.email.focus();
return false;
}
if (document.form1.idnum.value=="") {
window.alert ("You have not entered your ID Number!");
form1.idnum.focus();
return false;
}
}
//-->
</script>
</head>

<body>

<form method="POST" name="form1" action="" onSubmit="return validateform( this.form )">
<p>NAME:<input type="text" name="name" size="20"></p>
<p>DEPT:<input type="text" name="dept" size="20"></p>
<p>EMAIL:<input type="text" name="email" size="20"></p>
<p>ID NUM:<input type="text" name="idnum" size="20"></p>
<p><input type="submit" value="Submit" name="sub1"><input type="reset" value="Reset" name="reset1"></p>
</form>

</body>

</html>
beetle
03-22-2003, 02:47 PM
<html>

<head>
<title>New Page 1</title>

<script>

<!--
function validateform( f )
{
if( f.elements['name'].value == "" )
{
window.alert ("Please Enter a Name!");
f.elements['name'].focus();
return false;
}
if( f.dept.value == "" )
{
window.alert ("Please Enter your Department!");
f.dept.focus();
return false;
}
if ( /^\w.+@.{2}\w.+\.\w.+$/test( f.email.value ) )
{
window.alert ("Please Enter your E-Mail Address!");
f.email.focus();
return false;
}
if ( f.idnum.value == "" )
{
window.alert ("You have not entered your ID Number!");
f.idnum.focus();
return false;
}
return true;
}
//-->
</script>
</head>

<body>

<form method="POST" name="form1" action="" onSubmit="return validateform( this )">
<p>NAME:<input type="text" name="name" size="20"></p>
<p>DEPT:<input type="text" name="dept" size="20"></p>
<p>EMAIL:<input type="text" name="email" size="20"></p>
<p>ID NUM:<input type="text" name="idnum" size="20"></p>
<p><input type="submit" value="Submit" name="sub1"><input type="reset" value="Reset" name="reset1"></p>
</form>

</body>

</html>
ozz
03-22-2003, 03:18 PM
Hi beetle thanks for the help, have copied the code above but it does'nt seem to work, have i done something wrong?

Cheers again...
beetle
03-22-2003, 03:39 PM
Nope, I did. Missed a period

if ( /^\w.+@.{2}\w.+\.\w.+$/.test( f.email.value ) )
ozz
03-22-2003, 03:48 PM
Hi beetle, have re-copied and inserted the period but still no joy???
Philip M
03-22-2003, 04:34 PM
He wants to check for numbers only in the ID box so


if (/\D/g.test(f.idnum.value))
{
window.alert ("You have not entered your ID Number!");
f.idnum="";
f.idnum.focus();
return false;
}
ozz
03-22-2003, 04:39 PM
I have sorted the idnum bit, i just need to get the mail bit going so that there must be a @ and a . in the value.

eg ddd@ddd.ddd


Thanks again...
Philip M
03-22-2003, 06:57 PM
Try changing the email validation to:-

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(f.email.value){
return (true);
}
alert ("Missing or Invalid E-mail Address! Please re-enter.");
f.email.focus();
return (false);
}


Here the form is called f

You need to alter that to Form1 or whatever your form is named.
ozz
03-22-2003, 07:12 PM
LOL, Still does'nt work for me.

Heres what I have:

<html>

<head>
<title>New Page 1</title>

<script>

<!--
function validateform()
{
if(document.form1.name.value=="") {
window.alert ("Please Enter a Name!");
form1.name.focus();
return false;
}
if(document.form1.dept.value=="") {
window.alert ("Please Enter your Department!");
form1.dept.focus();
return false;
}
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form1.email.value){
return (true);
}
alert ("Missing or Invalid E-mail Address! Please re-enter.");
form1.email.focus();
return (false);
}
if (document.form1.idnum.value=="") {
window.alert ("You have not entered your ID Number!");
form1.idnum.focus();
return false;
}
}
//-->
</script>
</head>

<body>

<form method="POST" name="form1" action="" onSubmit="return validateform( this )">
<p>NAME:<input type="text" name="name" size="20"></p>
<p>DEPT:<input type="text" name="dept" size="20"></p>
<p>EMAIL:<input type="text" name="email" size="20"></p>
<p>ID NUM:<input type="text" name="idnum" size="20"></p>
<p><input type="submit" value="Submit" name="sub1"><input type="reset" value="Reset" name="reset1"></p>
</form>

</body>

</html>
Philip M
03-22-2003, 09:40 PM
Now working fine!

<html>

<head>
<title>New Page 1</title>

<script>

<!--
function validateform()
{
if(document.form1.name.value=="") {
window.alert ("Please Enter a Name!");
form1.name.focus();
return (false);
}
if(document.form1.dept.value=="") {
window.alert ("Please Enter your Department!");
form1.dept.focus();
return (false);
}

if (/\D/g.test(form1.idnum.value) || (form1.idnum.value == ''))
{
alert ("You have not entered your ID Number!");
form1.idnum.value = "";
form1.idnum.focus();
return false;
}

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form1.email.value)){
return (true);
}
alert ("Missing or Invalid E-mail Address! Please re-enter.");
form1.email.focus();
return (false);
}

//-->
</script>
</head>

<body>

<form method="POST" name="form1" action="" onSubmit="return validateform( this )">
<p>NAME:<input type="text" name="name" size="20"></p>
<p>DEPT:<input type="text" name="dept" size="20"></p>
<p>ID NUM:<input type="text" name="idnum" size="20"></p>
<p>EMAIL:<input type="text" name="email" size="20"></p>

<p><input type="submit" value="Submit" name="sub1"><input type="reset" value="Reset" name="reset1"></p>
</form>

</body>

</html>

You may think it a good idea to improve the validation to weed out names or departments like gHnjki£$lfeG (i.e. rubbish!)

Here's the function I use to check for sensible names:-


function checkname(which){
var badchars='/\@:?%!&£$#~<>^*+=";1234567890{}[]'; // invalid characters
var vowels="AaEeIiOoUuYy"; // name must contain at least one vowel
var cons=/[^AaEeIiOoUuYy]/; // name must contain at least one consonant
var blank="";
var vflag=0;
var bflag=0;
var name=which.value;
for (x=0;x < name.length;x++){
if (vowels.indexOf(name.charAt(x))!=-1){vflag=1}
if (badchars.indexOf(name.charAt(x))!=-1){bflag=1}
}
if (name.search(cons)==-1){vflag=0}
if (name.length < 6 || name.length > 24 || vflag==0){
alert ("That does not appear to be a valid person's name. \nPlease try again.");
which.value=blank;
which.focus();
}
if (bflag==1 && vflag==1){
alert ("Invalid characters were entered into this field.\nOnly alphabetic characters are allowed.\n\nPlease try again.");
which.value=blank;
which.focus();
}
}
ozz
03-22-2003, 11:53 PM
Perfect, Thanks all...
beetle
03-22-2003, 11:59 PM
This thread reminds me of why I spend so much time working on fValidate (http://www.peterbailey.net/fValidate/)