[MUSIC] Hi and welcome to our continuing introduction to JavaScript. In our last lesson, we looked at JavaScript events like onclick, which we had seen before, onload, and onblur. In this lesson, we'll continue with our onblur example and look at gathering additional user input from input fields, and dynamically modifying HTML. So this function, starting on line eight, defined with the keyword function and the function's name checkField one, gets a value from a field it does despite using document getElementById and puts that value into a variable called field. And then on line 11, we used the length property of the string field, all JavaScript strings have a length property, and we're checking to see if the length is less than five. If it is less than five, then we'll modify the innerHTML of message one to use the text Too short. Otherwise, if it's not less than five, we'll modify the innerHTML to say, That's long enough. So, scrolling down, we can see our input as we had from last time, the onblur is connected to check field one, which is this function. And message1 is where this output for innerHTML will go, depending on the results of this test for the link. So we can extend this because we may well want to do additional validation on the other two fields. And we can start that by first copying this function. Copy that function. And now, here, I have a copy but this is field two, so we'll want to give this function a new name. We have checkField1 from before, now we have checkField2, and in this function, we'll make sure that we're getting the value of field two by changing to this ID, which is field2 id here on line 41. And then, perhaps, in this case, we don't want to check to see if the length is less than five. Because, if that's what we wanted to do, we could probably find a way to reuse the other function. In this one, let's instead try this. Field, is not equal to. And recall that, when we have quotes like this with no content between them, it denotes the empty string, this means no input. And this combination of symbols means not equal. So I'm going to use a comment here. Put in. And this reminds us that this operator has to see if it's not equal to the empty string. So if it's not equal to the empty string, we can go ahead and say input accepted. And if it was the empty string, then we probably want to say something else. For example, you must provide input. So this is checkField2, we want to make sure that this input on line 41, it is going to call our new function. So, to make typing a little easier, I'll copy this and we'll make this Check field2. Now, we can also do a little double check and make sure everything's in order. And when we do, we could notice that here on lines 22 and 25, we're trying to work with the getElement idea message1, which was the message for the first field. And so, in this case, we should change to message2. And message2 is the id for the next span. So, this now looks like it's probably in working order and we can give it a test. I saved my work. Refresh, and first, let's try the original functionality to make sure it still works. So we'll put in a couple of characters, and we get too short. And notice that this one has already complained thatt we didn't provide input, giving us a good clue that it's working. So for this one, we can provide some additional characters, and we get That's long enough. And we still are getting the message here that we have a provided input on the second field, which is true. So now, let's provide just one character so it's not an empty string, and we get input accepted. So, we've created some validation. This field has to have at least five characters to be accepted and not get this error message or this error message. And this field has to have any input at all to work. Now, we can continue this idea and provide even more validation for the next input field. So that's all for this lesson. In our next lesson, we'll be looking at the importance of testing and debugging our JavaScript card.