Article
About the Author
Dr. Design
Dr Design answers design and development questions for SitePoint readers. Drop him a line today!
Dr Design - SSIs, Java Scrollers, and More!
The surgery's open, and today Dr. Design faces some interesting challenges, from form validation, to SSIs. Let's get started... and don't forget to submit your own questions to Dr. Design.
I Need Validation!
Hi Dr. Design,
On my site I have simple feedback and subscription forms that either email me or write to a file. My problem is that if the user presses his enter key while on my form page, it submits. Therefore I end up with hundreds of blank feedback pages saved or mailed to me, and I can never be sure if the user intended to submit something.
Also, my form results write "User Unknown", unless the sender fills out the email address textbox. Is there a way to glean the sender's address in code? Thank you,
Kim L.
Kim, I think this issue can be easily fixed if we perform some simple validation. Validation is the process of ensuring that the data users send, or you receive, is "valid". Some common issues you've run into are users hitting 'enter' by accident, and not filling in required fields, and validation will put a stop to this.
While we could disable the 'enter' key by simply removing your <input type= "submit"> and changing it to <input type="button" value="Submit" onClick="this.form.submit();">, I don't think it's the best course of action. While this would solve your immediate problem, it would also eliminate the primary method many visitors use to submit a form, which would be pretty frustrating.
What we want to do is reduce frustration for everyone (you and your users) involved. So, let's leave the submit button as-is, and instead, add a little extra code to your <form> tag:
<form method="POST" action="myfile.cgi"
onSubmit="return doValidate(this);">
Next, you'll need to code your doValidate function. Here's a sample you can place inside the <HEAD> of your document:
<script language="javascript" type="text/javascript">
<!--
function doValidate(theform)
{
if(theform.txtname.value=="" || theform.txtemail.value=="" ||
theform.subject.value=="" || theform.message.value=="")
{
alert("Please complete all form fields.");
return false;
}
}
-->
</script>
This example assumes that there are 4 required fields in your form: txtname, txtemail, subject and message. You could simply validate only the required fields by adding in theform.myfield.value="" wherever you required it. Or you could get slightly more complex, and, for instance, ensure that formatting of email addresses is valid, etc.
Basically, this gives you the power to ensure the data you are receiving is "real", and keeps user annoyance to a minimum. You could even extend the above function to give the user information on what fields were missing if you wished.
Changing Colurs with CSS
Doc, my Website has about 30 pages, and they all needed a color change, so I decided to do it with CSS. Is it possible somehow to make a CSS code that has all the properties of one table? And how would I include this in a CSS style? -- James
Hey James, this code should help you in your quest to define the entire look of your table:
<style type="text\css">
table { background: black; border: thin solid red; }
td { background: green; }
.bodyline { background-color: #2E425A; border: 1px #597795 solid; }
</style>
Then, to include this in a style, you'd simply include class="bodyline" in each table, like this:
<table class="bodyline">
Hope this helps!