Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding custom validation

From: Dynamic Dreamweaver Websites: Creating and Validating Forms

Video: Adding custom validation

We are now going to take a look at some custom JavaScript validation. And I could do an entire course on form validation using JavaScript. We're just going to touch the surface of this that I wanted to at least let you see what it looks like. And give you a very short script to use for some text fields with regards to custom validation. So let me show you that piece. I have opened the Contact Us-JS validation page, so that is the page that's open.

Adding custom validation

We are now going to take a look at some custom JavaScript validation. And I could do an entire course on form validation using JavaScript. We're just going to touch the surface of this that I wanted to at least let you see what it looks like. And give you a very short script to use for some text fields with regards to custom validation. So let me show you that piece. I have opened the Contact Us-JS validation page, so that is the page that's open.

This is the identical contact us form that we've been looking at but it has some additional information on it. So lets move over to quote view and if we scroll to the top of this page you'll see online 7, its a script language equals JavaScript. Any JavaScript you work with must go between these tags. Let me close up the Insert bar up on the top here. So I have a little more space to show you code to do that I'm going to go to the Window menu and just uncheck that. That gives me a little more space vertically for you to be able to see what I am doing.

So I'll scroll down. Now within this area, here's my opening script tag. So this is how you add JavaScript to a page. Here's my closing script tag and everything else in between is grayed out. That is a JavaScript comment, and a JavaScript, uses the same character's for commenting as PHP. So I'm going to select everything except the opening script tag so lines eight through 38 I'm going to select and click this red x, remove comment. So it is now live.

If I put this in the browser lets take a look and we'll come back and look at the code that was used to do that. So, I'll save my page now that I have JavaScript working so its not grey anymore. I'll go up to the browser, go to preview If I click this form, the Submit button specifically on the form, notice I get a nice message and only that message for the name field. So I'll click OK. I'll put my name in here, click Contact Us.

Now, it says please enter an email address. If I put two characters or so in the email address, it says, please enter a valid email address. Now, this piece is not specifically testing and being real picky about the e-mail address. As I said, this is a topic that we could talk about for a long time, this is very simple. It's testing the number of characters in the email address, so I'll put in a correct email address. Let's put example in here.

I'll click Contact Us and you can see the form submitted. So, that is our JavaScript custom validation in action. Now, what exactly is this script doing? Well the whole script piece starts down at the bottom. We have a Submit button so this is when our code is going to run, when the user clicks this button. When the user clicks this button to submit the form.

What's it's going to do is call a JavaScript function in our on submit, this is on the form tag, we're calling a JavaScript function, we're using the word this to represent the form. So what this is going to do is take our form, and it's going to return a true or false to whether the form was valid or not. If this does not return true to the unsubmit event, the form stops.

So we'll show you the code starting at the top. Now you can see why I didn't want this to be too complicated, because this is not a JavaScript course specifically. But when the user clicks the Submit button, the unsubmit event was triggered, and it calls this piece here. Form Validator is the name of our JavaScript function, that's going to take care of things for us. This will be the name of the form. So, we're passing in the name of the form when we call this function.

Now, the first thing that's going to happen, is this is our form this is the name field on the form. In other words, that text box called name, where the user would put in their name. This is what represents whatever the user typed in to that box. And we're going to test the length of whatever the user put into that box. If its less than 1 meaning if it's 0, they didn't enter anything in that box. We're going to get a message that says please enter your name.

Once that box pops up and the user clicks Okay, it's going to put the users cursor back in that name field and let our form know do not submit, return false, don't submit the form. This next one is simply testing to see if there's an empty inside that same value area. So these are almost double checking one another, please enter your name. Focus goes back in the name field. Now, we have a similar thing going on that we just looked at with the email. So, it's going to test and see if it's empty.

If so, we're going to get a, please enter an email address. This is going to test for how many characters are in the box. And this is the one where we got, please enter a valid email address, because I put less than 5 characters into the form field for email. So, this is the email address and that's all we have set up on our form. The comments area is not going to be required. If we wanted it to be required, we could use these same if statements.

I could simply copy this, and put in comments here. The name comments there and say please enter comments or whatever the message is I wanted for the user. So, that is how we're working with this form put it back in the browser we'll run it one more time. I don't put anything in I get a message and notice my cursor is blinking right here in the name field, if I put something in the name area click contact desk it's now in the email address. So, that is some custom JavaScript to give you a taste of looking at JavaScript and adding that for the form.

The downside of the JavaScript piece, is anytime you add JavaScript or add only client side validation, if somebody turns off their JavaScript, and we can do that using this web developer toolbar. Click Disable, go down to Disable JavaScript and turn it off. I can now submit this form without a problem. So, it is possible for a user to disable JavaScript, and that is usually why, even if you're going to put JavaScript validation on a form, you should double check it with server side validation. Just in case it can get past the JavaScript validation, your web server and PHP can double check it as as well.

So, that is some custom JavaScript validation.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dynamic Dreamweaver Websites: Creating and Validating Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.