Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- 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
To make things more backwards compatible, it's always better to use jQuerys methods instead of java scripts. They're built to be more compatible with older browsers. We can easily make sure that we choose each required field by using this selector. So we're going to choose all the input fields that have the required attribute in them. Now, I want to go through each of the fields with the required attribute so we can use jQuery's Each method. When we're using the Each method, jQuery will try to go through each element of the inputs that it picked sequentially. We can deal with the element as the loop is executing by using the This selector. To get the value of the field, we're going to use the Val method. So to check to see if this field is going to be empty, and we can check by typing in this and then use the value function.
So we're going to check to see if the value of the current field is empty. If it is, then we're going to do something right here. In the java script version of this script, what we did before was output things to an output variable that was at the top of the window right here. With jig query it's super easy to place things before or after an existing element. There are two methods named one Before and the other one After that let you do that. So, we're going to add a div after the current input field to give the user feedback right next to the input field as opposed to at the top of the form.
We'll give it a class of error just like before and type in a message. There's one more thing we need do. We haven't really prevented the form from submitting so I'm going to add an abort variable. We'll set it to false at the top of the Submit method. And if any of the input fields are not filled out, we'll set that variable to true. After we go through each field, we'll do an if statement that prevents the form from submitting, if any of the required fields haven't been filled out.
Now if somebody doesn't fill out one of the fields a second time and tries to submit the form they are going to keep on getting errors. So we have to delete all the errors and the page. This is one of those things that are super easy with jQuery. You can ask for it to remove all the dibs with a class of error in this way. So we'll do this at the very top of the page before we check each input, so that jQuery can clear any errors that are currently on the page. So I'm going to save this. So if I go back into this form, I'm using the chrome browser because the chrome browser understands HTML 5 validation.
You're not going to see a change in this form. So if I try and submit this form by itself, notice that the HTML5 validation, is still taking over. I'm going to show you this form in an old version of Internet Explorer, so you can see how my validation works, in that browser. Here I am on an old version of Internet Explorer. This happens to be IE9 and if I try to scroll down and submit the form without filling the required fields. it's giving me the errors, and it's doing so right underneath each required input field.