2.5 Soft-Coding Error Messages

We made some pretty good strides in generalizing our JavaScript in the previous lesson, to the point that now, really the only specificity that we have is the error message itself. This is hard-coded for our email field, and we would like to soft-code that, kind of like how we soft-coded the error element for displaying the error message. So we can take the same approach in that we can define the error messages that we want to display in the form field element itself with our own custom attributes. So in this case, we can have data-error-typeMismatch because that is the type of error for an invalid email address, we saw what the properties were, whenever we inspected the validity state object a few lessons ago. So, in this case when we have an invalid email address, well, we will just use our existing message. But if we don't have anything inside of the field, that would be an empty field, then we have a different property, and it's called valueMissing. Which makes sense because if you have a required field and there isn't a value for that field, well, that value is missing. So in that case, we're going to say please enter your email address which is slightly different but it's different enough. So that if there is a value missing for the email address, please enter your email address. If that typed something wrong, then please enter a valid email address. So we can be a little specific according to the error that is occurring. So, now we need to just determine what message to display. And I'm going to use a little trick that I and many developers use. And that is I'm going to write the code that I want to use because whenever you take that approach you actually end up with cleaner and easier to maintain code. So in this case since we have a variety of choices that we need to make, we need to determine what type of error has occurred and then retrieve the appropriate message. I don't want to have all of that code inside the EventListener. Instead, I want to just put that outside, inside of its own function. So let's call this getErrorMessage, and then we will pass in the element that we are working with. And then we will make whatever decision that we need to inside of that function. So let's write that function, and then, we can talk about how we're going to go about determining type of error and getting the appropriate message because we could definitely just use if statements. If the element.validity.typeMismatch is true, then we get the data$error-typeMismatch. Else, if element.validity.valueMissing, then we get that. And we could take that and that's valid. We would end up with working code. However, I don't want to repeat all of that. That's a lot of mundane stuff that I just don't want to do. And here's another trick, if you find yourself repeating the same code, then that's a good indication that you can simplify it. And if you are repeating something well what in programming repeats things? Well, a loop does. So if we can take advantage of a loop to just go ahead and determine all of these stuff for us then that would be even better. So let's do this, let's have an array that's going to contain all of the validation properties, so we'll just call this validation props. This is going to be an array where we simply just have a string here. So we'll have valueMissing, and then typeMismatch., and then the other types, which I'm drawing a blank on right now. So we can always come back and add these later. So that inside of getErrorMessage we would have something like this. We would have a for loop and then we would have our counter and then we would use our counter like this. Now this might look a little different to you especially if you've read other material or watched other material. A lot of people just use a single character i for the counter. Well I use ii and I can't take credit for this I actually learned it from one of my co-workers. But if you do a search for your counter variable, specially if you have a rather large for loop and you need to find where you're using that variable, we'll go ahead and do a search for i. Yeah, you're gonna come up with a lot of hits, because i is pretty common in any C style programming language, but ii definitely isn't. So, just a quick little trick, if you wanted to use that, feel free to, if not you have no skin of minus. So, we have a for loop and then, what we could do then is simply this, if (element.validity). And then we're going to use the square bracket syntax. Because, if you didn't know this, and it took me awhile to wrap my head around this, whenever I was learning JavaScript because anytime that I used an object I thought of just the dots syntax in order to access a property or method. But you can use square brackets and then you can pass on a string of the property that you want to access so value missing in this case. Even though it looks like we're using an array style syntax, we are still accessing the value missing property on the validity object, but in this case what we're going to do is use our validation props and we're going to pass in our counter variable. So that it's going to loop over all of these property names, and it's going to check to see if any of them are true, and if they are, then we know what message that we want to retrieve. So we can simply return element.getAttribute, and then we will say data-error- and then we will concatenate that with validationProps at counter ii. Actually, let's do this, let's say let prop equal validationProps ii, so that cleans up our usage of that a little bit better, makes it easier to read in my opinion. Otherwise, we are just going to return an empty string, because if we don't have anything to display then we don't need to display anything. So there we go. We have our function for retrieving our error message. So now let's go and look at the browser. And let's start typing something, please enter a valid email address. We haven't broken anything as far as that is concerned, but let's backspace out, and we see the please enter your email address. So we are now being able to pick the appropriate error message based upon the error that occurred and we have no longer hard coded our error messages in our JavaScript. So in the next lesson we just need to set up our other fields.