Log in

View Full Version : Validating forms before sending by email


rhawk6012
02-16-2005, 03:16 PM
I recently wrote a script to validate a form before sending it. The code works in IE but not in Netscape. What am I doing wrong?

Code below:
<html>
<title>javaTest</title>


<script type="text/javascript">


function SendMail()
{
var custname = MyData.customername.value
var custaddress = MyData.address.value
var custcity = MyData.city.value
var custzip = MyData.zip.value
var custdate = MyData.deldate.value

if(custname < 1 || custaddress < 1 || custcity < 1 || custzip < 1 || custdate < 1)
{
alert("Please complete all of the fields in the form")
}
else
{

testmat()
}
}


function testmat()
{
var custtime = MyData.deltime.value
var custmat = MyData.material.value

if(custtime < 1 || custmat < 1)
{
alert("Please complete all of the fields in the form")
return false;
}
else
{
testqty()
}

}


function testqty()
{
var custphone = MyData.phone.value
var custqty = MyData.qty.value

if(custphone < 1)
{
alert("Please complete form")
return false;
}
else
{
if(custqty < 1)
{
alert("Please enter quantity")
return false;
}
else
{
document.MyData.submit()

}
}
}

</script>
<head>
</head>

<body>
<FORM METHOD="POST" action=mailto:customerservice@alliedrecycle.com name="MyData" ENCTYPE="text/plan">

<font color = "blue"> <b>

<pre>
Name: <input type="text" name="customername"><br>
Address: <input type="text" name="address"><br>
City: <input type="text" name="city"><br>
Zip: <input type="text" name="zip"><br>
Phone: <input type="text" name="phone"><br>
Date: <input type="text" name="deldate"><br>
Delivery Time: <input type="text" name="deltime"><br>
Material: <input type="text" name="material"><br>
Qty: <input type="text" name="qty"><br>

<input type=button value="Send" onclick="SendMail()";>
<input type=Reset value="Clear Form">
</pre>

</b>

</form>
</body>
</html>

:confused:
mwinter
02-17-2005, 09:57 PM
The code works in IE but not in Netscape. What am I doing wrong?You're using some of Microsoft's proprietary nonsense.

In IE, you can access elements using the value of a name or id attribute. However, this is entirely non-standard and, in my opinion, a terrible feature.

In your specific case, it's extremely easy to solve. I've produced a quick-and-dirty solution (http://mwinter.webhop.info/dd/rhawk/validation.html) that shows the basics, but would probably require some alterations. I'll walk through the code you posted, making some comments and drawing some comparisons.


<title>javaTest</title>Please understand that Java is very different from Javascript. They are different languages developed by different companies.


function SendMail()In the code I posted, I passed an argument to the validation function. This argument contains a reference to the form, making it much easier to access the controls. Notice the call:


<form ... onsubmit="return validation(this);">When the this operator is used within listeners, it refers to the element - the form in this case.


if(custname < 1 || custaddress < 1 || custcity < 1 || custzip < 1 || custdate < 1)OK, that makes no sense. More importantly, it will fail to validate the entries properly. When a relational comparison (less-than/greater-than) is performed between a number and a string, the string is coerced to a number and then the comparison continues as normal. In most cases, the strings will be converted to NaN (not-a-number) which will result in a value of false for the comparison.

The validation of user input should be performed using regular expressions. I included several simple regular expressions in the demo (http://mwinter.webhop.info/dd/rhawk/validation.html).


<FORM METHOD="POST" action=mailto:customerservice@alliedrecycle.com name="MyData" ENCTYPE="text/plan">A couple of things here. The first is that your content type is wrong: it should be text/plain. The second, and more important point, is that forms which use the mailto: scheme are very unreliable. Forms are meant to send content to processing scripts. You should use one to e-mail the content. Your host should provide one, but if not you can find services (http://cgi.resourceindex.com/Remotely_Hosted/Form_Processing/) for free on the Web.


<pre>The pre element is meant to be used with source code or program output. That is, text which has already been laid-out. It should not be used to align elements. Use CSS to position elements instead (as per the demo (http://mwinter.webhop.info/dd/rhawk/validation.html)).


<input type=button value="Send" onclick="SendMail()";>That semicolon is in the wrong place. I'd also like to reiterate that it's better to validate forms based on the submit event, rather than on the submit button.


</b>You didn't close the font element after this closing tag. However, you should be aware that the font element has long been deprecated in favour of style sheets. CSS provides a much richer way of formatting and laying-out HTML documents.

Hope that helps,
Mike
simonf
02-18-2005, 10:57 AM
Hi

This works as well

<input type="hidden" name="require" value="Name,Email,Phone,Title,Comments">