Form Validating

Quick reference

• 00:05 In this video, I wanna move ahead with slightly more practical stuff, so
• 00:08 we're gonna look at form validation.
• 00:10 And form validation is important for
• 00:12 most web sites because most web sites have some sort of fill-out form.
• 00:15 A contact form, or an order form, or
• 00:18 an email subscription form, or any type of form at all.
• 00:21 So JavaScript allows us to validate forms pretty easily,
• 00:25 and what exactly do I mean by that?
• 00:27 Well, let's say you have a form and it asks for your email address and
• 00:30 instead of writing in an email address, I type in the word banana.
• 00:34 Banana is not an email address, and we want our JavaScript to figure that
• 00:38 out before we submit the form, or after we submit the form, whatever.
• 00:42 We wanna validate that it's not an actual email address, and then maybe push out
• 00:46 a little message that says, hey, banana's not an email address, what are you doing?
• 00:50 Or something like that.
• 00:51 So, we can validate any form field in any way we want.
• 00:55 For instance, if someone forgets to fill out a required field, we can maybe send up
• 00:59 a little pop-up that says, hey, you forgot to fill out that field, whatever.
• 01:03 So, first off, let's build a simple little HTML form.
• 01:06 And I'm just gonna paste this in here, tab this over.
• 01:09 So we have, name.
• 01:10 Here's our ID.
• 01:11 Our input, we called it fullName, here's our button.
• 01:14 Underneath it, I've given it this P with an ID of return, so
• 01:18 whenever we have to return a message, we'll put it right there.
• 01:20 So, if we save this, come back here and hit reload, we just have this name,
• 01:23 we can type stuff, we can click the button.
• 01:25 So it doesn't actually do anything yet.
• 01:27 But you'll notice the button on click calls this myFunction, so
• 01:31 we need to build myFunction.
• 01:32 And I'm just gonna paste this in here, tab it over so we can look at it.
• 01:37 Okay, so here's our function.
• 01:39 It's called myFunction.
• 01:40 And it's creating a variable with fullName and we're slapping in the value of this
• 01:45 input id .value and now we're just doing a simple If/Else statement.
• 01:49 If the full name, if this field, is equal to nothing,
• 01:54 double quotes nothing, then we're saying, hey, you forgot to enter your name.
• 01:58 Otherwise, else, put this little message up here.
• 02:00 So if we save this, come back here and hit reload, if I type in John Elder,
• 02:05 hit Submit.
• 02:06 It says hello, John Elder.
• 02:07 If I reload this and type in nothing and click Submit, it says hey,
• 02:11 you forgot to enter your name.
• 02:12 So, very, very simple.
• 02:14 You could change this If/Else statement to validate anything at all you want.
• 02:18 In this field you can validate,
• 02:19 you could test to see whether it contains an @ symbol, right?
• 02:24 'Cause people with email addresses, they have my email@whatever.com.
• 02:30 So you might search for an @ symbol to make sure it's an email address.
• 02:34 There's lots of ways to validate for
• 02:36 email addresses with something called regular expressions.
• 02:38 It goes way beyond the scope of this particular video.
• 02:41 But you would do it the same way.
• 02:42 You would grab the item from the form and
• 02:46 then just run a simple If/Else statement to test against whatever in the world you
• 02:50 want it to test against to validate whatever you want it to validate.
• 02:53 So it's a very simple way to do this.
• 02:55 A very simple mechanism for validation.
• 02:57 And really, that's all there is to it.
• 02:58 So in the next video, I'm gonna do a quick intro into jQuery.

Lesson notes are only available for subscribers.