- View Offline
- Understanding forms
- Adding required fields and placeholders
- Accepting multiple entries
- Limiting uploads
- Handling focus changes
- Validating with regular expressions
- Working with older browsers
- Building jQuery validation
- Using server-side validation
- Sanitizing form input
- Uploading files
- Sending form data to a database
Skill Level Intermediate
I'm going to go to cdnjs.com and I'll do a search for validate. You can see the jQuery validate library right here. So I'm going to copy this URL, and go back into my form and I'll paste it right after the jQuery code. Now I'm going to add the HTTP colon right here. Notice some problems if I don't add the HTTP colon to this link. Now adding validation to our form is going to be ridiculously simple. All we have to do is identify the form within the jQuery global variable. And send it to the validate method at the validate plugin created for us.
So I'm going to go all the way to the bottom and I'm going to replace my current script tag, which is calling my validation script. And first, I'll call the document ready function, and after that, I'll use the jQuery dollar sign global method. And I'll pass it the location of my form, which is a form with an ID of my form. And that's pretty much it by adding the validate method and targeting my form, you've added all kinds of functionality to our existing page. So I'm going to save this and go over to my form and I'll refresh and now when I try to type in say, an email, if I don't type a correct email, it's going to tell me please enter a valid email address.
Notice that it's even making this font automatically red for us. So if I type a correct email address, the information goes away. Now if I try to submit the form, it'll tell me to please enter your name. So it noticed that this field was a type text field and it had a name alike my name and it automatically detected it as a required field. Notice that I can type this with a way that doesn't follow the requested pattern. And I can submit the form. It's going to go ahead and submit the form. And it's not given me the live feedback that I had when I created my own script.
So, what I want to do is tell my password field has to be at least six characters in length, and that it's going to be a required field. Now, I'm going to copy this field and paste it right here. And I'll modify it to save my password, conf. So my password confirmation, I'm going to delete the minimum length, and just tell it that this is going to be, equal to, the field called, my password.
Take out this comma. So my password field is going to have a minimum length of six. It's going to be a required field, and the password confirmation is going to have to match whatever the password was. So lemme go ahead and save this and go back into my form. I'll refresh, and I'll try to type in, just the password here. Then I'll try to type in some other password that doesn't match. If I do that then it's asking me to make sure I set the same value.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.