2.4 Generalizing Error Placement

We ended the previous lesson with a completely validated email field. We can enter whatever we want into that field and an error message will display whenever there is an invalid email input into that field. And of course that message goes away whenever we have a valid email address. And also, it's worth pointing out that our error message is now part of the UI. It's not disrupting the user experience as it was. As an alert box. So now that we have that, I want to start generalizing our JavaScript code, because right now, it's pretty specific. It is specifically for the email field, and we have two other fields that we need to validate, the user's name and the message. That they are going to send and I don't want to have to write specific code for each individual field in the form. I mean yes there might be times when we need to do that but in our case we don't need to. We just need very simple validation. We need to ensure that we have a name inside of our name field we need to ensure that we have a message before anything gets sent. So let's start generalizing our code so that we can use it for just about any form field. And the first thing that we could do is stop referring to the element that we are validating with this email variable. We definitely need it whenever we set up the event listener, but inside of the event listener, we don't need to refer to that element directly, because we can get it from the event object. So let's do that. Let's create a variable called element, and we will use the target property on our event object and then we will use that in place of that email variable. So if we test this out in the browser we should have the same behavior and we do, thankfully. We haven't work in anything yet. So the next thing that jumps out at me is the error message. Right now this is very specific for the email field and there's really no way around this because each one of our fields is going to have a specific element for displaying the error messages. For those fields. Now we could take the approach of having a section kind of at the top of the form where we just display all of our errors and that's a valid approach, but I like the idea of having the error message with the field because that's a nice visual cue that says hey. You need to address this field here. So I still want to use a span inside of the forum group for displaying the error message for that given field, and there is different ways that we can approach this but something that comes to mind is using a declarative syntax to say that hey, this span element goes with this input element. Kind of like how the label is for a given field, we can kind of do the same thing with the error message by using a custom attribute. Now, I can't take credit for this idea because it's been in several places. But if you've used boot strap, and more specifically used some of the components like the modal, you'll see this. And let's just look at a brief example before we start implementing it so that you can get an idea. Of what's going on, so we have this Modal, here. Here's the markup for that modal, nothing really spectacular there except that there's a lot of div elements. But let's drop down to the Live demo, whenever we click on this button it's going to pull up the modal, and then. We can of course close it. But how does that work? There is no JavaScript, well of course there is JavaScript running behind it. But as far as making this work within your page, you don't have to write any JavaScript at all. All you have to do is first of all have whatever is going to trigger the display of the modal, which in this case is a button, and then set this data-target attribute. You'll notice that this is a CSS selector, so that there is a link between the button and the modal itself. Now, it's not a hyperlink, but it's a logical link. So that's inside of the html, you can declare how these things are related to one another and you don't have to touch anything in JavaScript. And that's what I want to do so that we can do something like this. We'll have data-error-element. I don't want to get too long here because the longer your attribute name, the more difficult it is to remember it, but data-error-element should be okay, and then we could specify the CSS selector. So in this case it is. An ID of #error-email-message. So, now, we can go back to our JavaScript code, and instead of using this email error, in fact, we will be able to get rid of that completely but we can see, first of all, if we have that attributes. So, let's say errorAtt= and we will use the getAttribute method. And we want to try to get that data error message attribute. Now it's possible that the element does not have that. And so in that case we need to check if we have a value there. Because if we don't, then we just want to return. There's nothing to do because this no error to display, otherwise we want to use that value in order to retrieve that span elements, so let's say error element is going to be equal to document query selector and we will pass in the value that we retrieved from the attribute. That should give us our error element. In which case, we can then set the innerHTML, based upon the validity of that field. So now if we go back to the browser and let's test this out. Okay, we've definitely broken something so let's look at the console and let's see what error messages that we get and it looks like nothing so maybe I didn't save the HTML. I definitely did so the only other thing is. I've mistyped something, and that is my most common [LAUGH] Error, so there it was, whatever that was. Okay yeah, I can see now. All right, so with that fixed, we should be able to see the behavior, and we do. So everything is working as it should. We can not get rid of this email error variable because it is no longer used. And we have now essentially soft coded the error element, or at least the element that we want to use to display the error messages. Now we need to focus on the error message itself because that is still hard coded and it is still specific to the email address. But that is something that we will focus on in the next lesson.