Contact Form Validation The Dreamweaver Way

Over the past couple of weeks I have written two articles on Creating Contact Forms with Dreamweaver using PHP and ASP. These articles have been quite popular. The one thing that these forms lacked was form validation, meaning that visitors could enter anything into the fields they liked. This is not really what we want and leaves the door open to a ton of spam and automatic form fillers the ability to easily send us crap!

In Dreamweaver CS3 there is a very easy way to apply form field validation and in this article I will so you exactly how to achieve this.

Step 1. Create The Form or Open an Existing One

In this example I am going to use the form that I created when doing the ASP Contact Form Example.


Dreamweaver ASP Contact Form Tutorial

Step 2. Apply The Validation To The Form Elements

Ok with your form now open in Dreamweaver click on the Submit Button. Now on the Top Menu Select Window > Behaviours You will now notice on the right hand side under the TAG Heading that the Behaviours Tab is now active.


Adobe Dreamweaver Tutorial Validate Contact Form

Click the Plus Icon and then Select Validate Form. You will then be presented with the Validate Form Dialog Box.


Adobe Dreamweaver Tutorial Validate Contact Form

Here you will find all the Fields that we can apply Validation to. For this example I went through and marked all the fields required, and also for the email text box I only want to accept and email address so I selected the Email Radio Button next to the Accept Section.

After you have applied the Validation that you require, Save The Document and test it by not entering in anything into the fields. You should get a pop up box like this.


Adobe Dreamweaver Tutorial Contact Form Validation

There we have it, you can now apply form validation to your Contact Forms.

Don’t Miss Out on The Tips that others are getting, SIGN UP for my Web Design Tips Newsletter.


| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

AddThis Social Bookmark Button

16 Responses to “Contact Form Validation The Dreamweaver Way”

  1. Thanks so much… your tutorials are straight to the point and more informative than information I pay for in courses.

  2. arnold sandjaja Says:

    your tutorial is very handy :D thx man

  3. This tutorial and the prior ones on forms made creating a form very easy. The only hassle I have is how to validate that one of three radio buttons have been chosen, without doing something much more complicated.

  4. I want to know a method that validate e-mail forms from maill server

  5. Hi, these articles are outstanding!!! I go here first to look for answers before I go anywhere else, in most cases I don’t have to go anywhere else!

    How do you edit the validation?

  6. Please delete my last post… it is already fixed.. I was working with includes.. so it couldn’t change some things in the head section..

    So only thing I have to say is… Great tutorials! Thanks alot! :D

  7. You are the man dude! Your processes are written so precise that a novice without any knowledge can get the result in a timely manner and achieve highest quality solutions. If I wouldnt be married, I would marry you.

    Adrian

  8. thank u somuch, very helpful

  9. Anybody home?
    Ohio megamillions, va mega millions lotto, good morning america homepage.
    http://skika2008.narod.ru/11/inselkam3d/

    Best Regards

  10. Are you kidding me?!? I have spent HOURS trying various validation coding and nothing worked. Happened across this in a search and a few clicks later- it’s all set and works like a charm! THANK YOU!

  11. Wonderful sight, I have been doing something else for about 5 years and need to quickly catch up with latest methods etc.

    This is the best sight I have discovered so far.

    Many thanks

  12. When I validate the form the button SUBMIT disappears on reload on Firefox? I am using an earlier version of Dreamweaver.
    The code in this line is

    What am I doing wrong? ( it all works OK without the validation bits)

  13. the code did not show in previous post so I have removed the indent marks

    inputname = “Submit” type=”submit” onClick=”MM_validateForm(’0′,”,’R',’1′,”,’NisEmail’);return document.MM_returnValue” value=”Submit”/

  14. Thanks for the great tut, very informative!

  15. Thank you so much, great tutorial :-) saved me a lot of hassle

  16. Thankyou…

Leave a Reply