2.1 Creating the Form

Naturally, if we are going to validate a form, we need a form. So in the previous lesson, we created a file called index.html. And let's just put our form here. So the first thing I'm going to do is bring in the Bootstrap CSS. Now, I'm not going to worry about the JavaScript portion of Bootstrap, we're just going to be pulling in the CSS. And I'm doing so using a CDN, so that we don't have to worry about using NPM to pull that in, and then using other tools to put the files where they need to go. We're just going to use the CDN, it's much easier that way. As far as the title, let's change this to Form Validation. And then, we'll start with our form. So let's put everything inside of a div that has a class of container. And let's also have a page title here. So let's use an h2 element, and let's create a form that would be used for sending us a message. So we'll say, Contact Us. And we'll start with just two fields. We will need the sender's name, as well as the message. Now, I did get rid of the action. We're not going to be submitting this or anything. So there's really no need to define an action here. And yeah, we'll just go from here. So first, we'll have the sender's name. Let's put this inside of a div that has a form-group class. And we'll have a label, and the input element. Now as far as this field, let's call it sender-name. And the text, we'll just have Your Name. And then for the input element, we want a class of form-control. And we also want the id. And I guess for the sake of completeness, we'll also have the name. Now the name is really only useful for when we actually submit the form, which we are not doing. But, well, we'll at least say that, hey, we have the name attribute. So that should be it for our sender's name. The next thing we need is the message, which is going to be a text area. So let's start with the label. And we'll just call that field, message. And for the text of the label, we'll have Message. And then we'll have a text area that will have a class of form-control. And well, isn't that interesting?. It automatically generated name and id, but it didn't do that for input. I would think that, you would want that regardless of what form-control you're creating. But, well, they didn't asked me. So we'll populate name and id with message. Let's get rid of the columns and the rows, because we're going to rely upon the form-control class to give us that information. And then finally, we need a submit button. So let's have another form-group. Let's have a button with a class of btn.btn-primary. And then for the text we'll just say, Send Message. So let's look at this in the browser. Now, one of the really nice things about this light server, HTTP server, is that any time you make a change to the HTML, JavaScript, or CSS files, it's going to automatically refresh the page. So we no longer have to make an edit, go to the browser, hit refresh. It's going to automatically refresh for us. And we can control what files that it will refresh for, through the config. If we wanted to, we could add another feature, I don't what the name is off the top of my head. But we could say that's okay, for just HTML and JavaScript files, do the refresh. For anything else, don't do anything. But we want that for CSS as well. Okay, so we have our form. Now, when it comes to validation, we live in a day and age where all the modern browsers have built-in support for form field validation. For example, if we wanted to make sure that the user enters in their name, well, we can just add the required attribute. And the browser is going to force that constraint. So that if we try to submit the form, the browser is going to say, Please fill out this field. If we open this up in another browser, let's do Edge since I have that readily available, well, kind of. And we're going to see the same behavior. If we try to submit it, we're going to see that this is a required field. And if we add in that same attribute to the text area, we would see that as well. So there we go, we have form validation. We're done, and thanks for watching. No, I'm kidding, there's other things that we need to talk about. So we have this built-in validation that we can take advantage of. And that's really nice, but it also allows us to customize it a little bit as well. For example, if we wanted to say that the invalid form fields have a background color of red. Well, then we can say that for every input element that has the invalid pseudo-class, then it's going to have a background-color of red. And actually, let's use yellow. And if we go back to the browser, let's go to Chrome. And you can see immediately that the form field is yellow. And if we type something into it then, of course, that's going to satisfy the required validation, and so that background color goes away. So we have two pseudo-classes that we could use. Invalid for invalid fields and then we have valid for, as its name implies, valid fields. Now, this goes for any type of built-in validation. So we have two things, we have the name and the message, both of which need to be required. So let's go ahead and add required to the text area as well. But, you know what? We also need the sender's email address. So let's create another form field, we'll have a label. But in this case, it's going to be for, let's just call it email. And let's say, Your Email Address. But as far as the input type, this is no longer a text element or a text box. This is for an email. We have this new, well, it's not really new. It's a new-ish type of input element for an email. And in this case, it's going to ensure that the email address that is typed into this field is valid. So let's go back and add this invalid pseudo-class, so that we see two things. First of all, the name is required, so we see the background color of yellow until we enter in something there. And then for the email address, we can enter in something. But notice that we still have a yellow background, and that's because the browser knows that this is not a valid email address. So we write something that is going to look like a valid email address. And we see that, that invalid pseudo-class is no longer being applied to that element. And then if we try to submit this form, we're going to see that the message needs to be filled out. But notice that we don't have any styling here because we didn't specify the text area, we just specified the input element. So we could add textarea to this as well. So if that is invalid, then we'll get that styling there as well. So at the most basic level, we can typically rely upon the browser to enforce form validation. Now, the caveat is that this is only for modern browsers. Unfortunately, we live in a day and age where Internet Explorer is still being used by some people in the world. And it would be great if they didn't use it, but that's not reality. There are some versions of Internet Explorer that does not have support for that built-in validation. And so in those cases, we have to use JavaScript, and we'll get to that in a few lessons. But first, we're going to use the HTML 5 constraint validation API to customize our form validation experience.