Practice JavaScript and Learn: Create a Contact Form

2.5 Displaying Validation Messages

In the previous lesson, we wrote the majority of our validation code. And so now we just need to display those messages so that we can make sure that the validation code actually works. So we're gonna start inside of our HTML because we kind of want the same thing that we did for the info messages, but we want them for the validation messages so that we will have a div element that contains just those validation messages. And we'll call the id validation-messages. Now I also want to have something visually separating all of these different containers because we're gonna have info, we'll have validation. We'll also have application errors. So let's use some of Bootstrap's built-in things, like we have the alert class, which will be nice. And for our validation messages, we could use warning, that would be yellow. Normally I would use red, but we could use red for application errors. So for our validation errors we'll make those warnings, and then we can use the info class for the info messages. That makes perfect sense. So if we go back, we see those containers. And we don't want to see those containers if there aren't any messages. So we will handle that here in a little bit. But for now, we at least have something to use to visually separate our messages and we have a container for our validation messages. So inside of our message pane, let's go ahead and let's create a variable called valOutput, and we will retrieve the validation message. Well, that should be messages so that we are consistent there. So there we go. We have our output. And now we just need to write that validation method that we stubbed out in the previous lesson. So we will have validation. Let's see, we had the element id and then we had the message that we wanted to display. Now, we are going to actually break this up into two things because we want to use this to set the validation message so that we actually see that in the page, but we also want to clear it out as well. And these are kind of two separate things. So let's do this. If we don't have a message, then that means we are going to clear the validation message. So there we go, we could pass in the id. Because remember that we need to associate the messages with the given element id so that we show all of the messages that we need to. And if we do have a message, then of course we want to setValidation. Once again, we will pass an id and then our message. So let's write these functions. This way our validation method is nice and clean and all of the hard work is going to be done inside of these helper functions. So for set validation, we have the ID and then we have the message. And we are going to dynamically create elements to display these messages so that we can link the message with the given element id. So in this case, we wants to create an element, this will be a div element. And we want to give it an id, don't we? We can't really set it to id, so what we will need to do is kind of generate our own, which is going to be very simple. Let's just call it errid, and we'll start that with msg-. And then we will just take the id that was supplied, that should be unique enough, and then we will pass that on to the clear and set validations. So now we can set id equal to the provided id. And then we will set the innerHTML to the message. And then finally we will append that to valOutput. Now, this is actually going to give us an issue, which you will see here in a moment. But this is the moment of truth to see if our validation code works, it does. Please enter a valid email address, that's perfect. So let's keep typing, and for every time that we type we have a new error message being displayed. That's because we aren't clearing them out. We want just a single element to contain the error message for that single field. And if we clear out email, then you're going to see that the Please enter your email address is also listed here as well. So this is, of course, not what we want, but we are at least on the right track. So really, the first thing that we should do then is check to see if we already have created this element. And we can do that by simply using getElementById to retrieve that element. And if we don't have that element, then we can create it. And then we will set its id and setting the innerHTML. We're gonna have to set the innerHTML anyway. So we're gonna do this. I don't particularly like doing this, because whenever I build an element dynamically I like to have it completely built. That means everything about that element should be there, as far as attributes and content and everything like that, before you append it to the document. But if we were going to do this quote/unquote correctly that would require more code. And really, this is not a big deal. It's not like we're doing this thousands of times all at the same time. So this should be okay. So let's go back and let's look at this again. So if we go to Email and we start typing, now that is perfect. Because now we just have a single message being displayed for Email. And if we clear this out, then we should still just have one message, Please enter your email address. So that's what we want, that's great. But now he wants to clear that out whenever validation passes. So now we need to implement that clear validation. So we will have the id and we will essentially want to do the same thing. We will check to see if that element exists, and if so then we will simply just remove it from the valOutput. So we will remove that child and that should get rid of that message. So once again, we provide a valid value and the error message goes away. So that's perfect, that's exactly what we wanted, except that when it is valid and there's no validation errors, we don't want to display that container. We want to hide it. Well that's easy enough to do. Let's go back to our HTML and we are going to add the display none class to both of these things because we want both of them to be gone if there's nothing to display there. And whenever we set the validation, after we set the innerHTML, we will simply use the class list on valOutput and we will remove that display none class. However in clear validation, we want to add that class if there are no children inside of valOutput. So we will check to see if valOutput does not have any children, and if not then we will remove, I'm sorry, we will add d-none there. So that should fix the validation content section. And sure enough, well that didn't, did it? Let me make sure I saved that. Well, I don't see anything wrong with that logic. So why then is that not going away? Let's take a look at our console. Let's see if we're getting any errors, valOutput,hadChildren is not a function. And, yes, that is correct because it's not hasChildren, hasChildNodes, duh. So now, there we go, that is functionality that we were expecting. So we just need to do the same thing for our info as well, and really that should be easy enough to do. We know if we have a message that we want to remove that class, otherwise we want to add it. So let's do this, we will try to make this as clean as possible so that if we have a message, then the method that we want to use is remove so that we display the element. Otherwise we will add that class to hide it. And then we will say infoOutput.classList. We will use the specified function and pass in the correct class there. So now, as we focus on these other fields and we blur, that goes away and our validation messages do the same thing. So everything is going very well. In fact, now the only thing that we need to do is do a better job of handling the click for the button, or at least handling the form submission. First of all, we need to validate all of the fields and then issue the HTTP request if everything goes okay