PDA

View Full Version : Form validation problem.

Jamse
08-13-2002, 04:45 PM
Im having problems with a simple form validation.
What i want to do is check that two text boxes have something in them and that another text box has a no. between 1 and 100 inclusive or no value.
This is what ive got so far, but it doesnt seem to be working:


<HTML>
<head>
<title>Request For Time Sheets</title>
<script type="text/javascript">
<!--
function validate()
{
x=document.TimeSheets
name1=x.name.value
dep=x.department.value
sewing=x.Sewing/601.value
submitOK="True"
if (name1=="")
{
alert("Please fill in name.")
submitOK="False"
}
if (dep=="")
{
alert("Please fill in .")
submitOK="False"
}
if (sewing<1 || sewing>100)
{
alert(Please enter a correct amount of sheets.")
submitOK="False"
}
if (submitOK=="False")
{
return false
}
}
//-->

</script>
</head>

<body>
<form method="POST" action="http://191.100.1.83/cgi-bin/FormMail.pl" name="TimeSheets" onsubmit="return validate()">
<table border="1" cellpadding="5">
<tr><th>Name:*</th>
<td colspan=2><input type="text" name="name" size="50"></td><tr>
<tr><th>Department:*</th>
<td colspan=2><input type="text" name="department" size="50"></td></tr>
<tr><th>Sewing</th><td>100</td>
<td><input type="text" name="Sewing/601"></td></tr>

<All closing tags and submit buttons>



I know there is something wrong here but just cant see it.
I got the script part from http://www.w3schools.com/js/tryit.asp?filename=tryjs_formvalidate and modified it a little.

Anybody point me in the right direction?
Thanks

Jamse
beetle
08-13-2002, 05:02 PM
Well, modify this first...<form method="POST" action="http://191.100.1.83/cgi-bin/FormMail.pl" name="TimeSheets" onsubmit="return validate(this)">then, change the function like this:function validate(f)
{
if (f.name1.value =="")
{
alert("Please fill in name.")
return false;
}
if (f.dep.value =="")
{
alert("Please fill in .")
return false;
}
var sewing = parseInt(f.Sewing/601.value);
if (sewing < 1 || sewing > 100)
{
alert(Please enter a correct amount of sheets.")
return false;
}
return true;
}Remember, only create variables for objects or object properties if you are going to use them more than once. Otherwise, it's just a wasted line of code.
adios
08-13-2002, 06:08 PM
Not legal: var sewing = parseInt(f.Sewing/601.value);

Here's a suggestion:

<HTML>
<head>
<title>Request For Time Sheets</title>
<script type="text/javascript">
<!--
function validate(f) {
var el, msg = '';
if (!f.name.value) {
el = f.name;
msg = 'Please fill in name.';
}
else if (!f.department.value) {
el = f.department;
msg = 'Please fill in department.';
}
else {
var sheets = parseInt(f['Sewing/601'].value);
if (isNaN(sheets) || sheets<1 || sheets>100) {
el = f['Sewing/601'];
msg = 'Please enter a correct amount of sheets (valid number, 1-100).';
}
}
if (msg) {
alert(msg);
el.focus();
el.select();
return false;
}
return true;
}
//-->

</script>
</head>
<body>
<form method="POST" action="javascript:alert('Submitted !')" name="TimeSheets"
onsubmit="return validate(this)">
Name:*
<input type="text" name="name" size="50"><br>
Department:*
<input type="text" name="department" size="50"><br>
Sewing 100
<input type="text" name="Sewing/601"><br><br>
<input type="submit">
</form>
</body>
</html>

if (!field.value) is sufficient (the empty string always evaluates to false). Don't forget: false is a Boolean value - a special type of data in itself - and it and true aren't strings so, skip them quotes.

hth
Jamse
08-14-2002, 09:42 AM
Thanks , they both work and i even understand(sort of) the first.
But what i really need it to do is to able to leave the "Sewing/601" feild blank, but if there is anything entered into it then it can only be between 1 and 100.
If i have 50 text boxes the same as "Sewing/601", can i just copy and paste the code 50 times but changing the names? Would this slow anything down?



Thanks

Jamse
adios
08-15-2002, 12:41 AM
Jamse...

Got the part about the optional fields; the other is unclear, so, guessed you wanted to validate multiple text fields each in a 'Sewing/number ' format. This will do that; you can probably modify it if I missed the mark:

<html>
<head>
<title>Request For Time Sheets</title>
<script type="text/javascript" language="javascript">

function validate(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.name == 'name' && !el.value) {
alert('Please fill in your name.');
el.focus();
return false;
}
else if (el.name == 'department' && !el.value) {
alert('Please fill in your department.');
el.focus();
return false;
}
else if (el.name.indexOf('Sewing/') != -1) { //looks for field names with 'Sewing/' in them
if (!el.value) continue; //blank OK
var sheets = parseInt(el.value);
if (isNaN(sheets) || sheets<1 || sheets>100) {
alert('Please enter a valid number of sheets for ' + el.name + '.\n\nAllowable: 1-100.');
el.focus();
el.select();
return false;
}
}
}
return true;
}

</script>
</head>
<body>
<form method="post" action="javascript:alert('Submitted !')" name="TimeSheets"
onsubmit="return validate(this)">
<input type="text" name="name" size="32">
<strong>&lt;&lt;&lt;NAME<font color=red>*</font></strong><br>
<input type="text" name="department" size="32">
<strong>&lt;&lt;&lt;DEPARTMENT<font color=red>*</font></strong><br>
<input type="text" name="Sewing/601"> <strong> &lt;&lt;Sewing/601</strong><br>
<input type="text" name="Sewing/606"> <strong> &lt;&lt;Sewing/606</strong><br>
<input type="text" name="Sewing/901"> <strong> &lt;&lt;Sewing/901</strong><br><br>
<input type="submit" value="DONE">
</form>
</body>
</html>
Jamse
08-15-2002, 11:08 AM
Thanks, thats almost what im after.

What if i want to have it validate some more boxes called "Foaming/no." but they can only be 1-25 inclusive.
Ive tried:
}
else if (el.name.indexOf('Foaming/') != -1) { //looks for field names with 'Foaming' in them
if (!el.value) continue; //blank OK
var sheets = parseInt(el.value);
if (isNaN(sheets) || sheets<1 || sheets>25) {
alert('Please enter a valid number of sheets for ' + el.name + '.\n\nAllowable: 1-25.');
el.focus();
el.select();
return false;
}

Ive tried putting it under the "Sewing/" bit but it just seems to be ignored.
If i put it above the "Sewing/" bit then it works, but the "Sewing/" part gets ignored.

Jamse
adios
08-15-2002, 06:02 PM
<html>
<head>
<title>Request For Time Sheets</title>
<script type="text/javascript" language="javascript">

function validate(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.name == 'name' && !el.value) {
alert('Please fill in your name.');
el.focus();
return false;
}
else if (el.name == 'department' && !el.value) {
alert('Please fill in your department.');
el.focus();
return false;
}
else if (el.name.indexOf('Sewing/') != -1) {
if (!el.value) continue;
var sheets = parseInt(el.value);
if (isNaN(sheets) || sheets<1 || sheets>100) {
alert('Please enter a valid number of sheets for ' + el.name + '.\n\nAllowable: 1-100.');
el.focus();
el.select();
return false;
}
}
else if (el.name.indexOf('Foaming/') != -1) {
if (!el.value) continue;
var foam = parseInt(el.value);
if (isNaN(foam) || foam<1 || foam>25) {
alert('Please enter a valid number of (foams?) for ' + el.name + '.\n\nAllowable: 1-25.');
el.focus();
el.select();
return false;
}
}
}
return true;
}

</script>
</head>
<body>
<form method="post" action="javascript:alert('Submitted !')" name="TimeSheets"
onsubmit="return validate(this)">
<input type="text" name="name" size="32">
<strong>&lt;&lt;&lt;NAME<font color=red>*</font></strong><br>
<input type="text" name="department" size="32">
<strong>&lt;&lt;&lt;DEPARTMENT<font color=red>*</font></strong><br>
<input type="text" name="Sewing/601"> <strong> &lt;&lt;Sewing/601</strong><br>
<input type="text" name="Sewing/606"> <strong> &lt;&lt;Sewing/606</strong><br>
<input type="text" name="Sewing/901"> <strong> &lt;&lt;Sewing/901</strong><br><br>
<input type="text" name="Foaming/33"> <strong> &lt;&lt;Foaming/33</strong><br>
<input type="text" name="Foaming/66"> <strong> &lt;&lt;Foaming/66</strong><br>
<input type="text" name="Foaming/99"> <strong> &lt;&lt;Foaming/99</strong><br><br>
<input type="submit" value="DONE">
</form>
</body>
</html>