Welcome back.
How's your form coming along this lesson?
We're going to make it interactive, so we want to make the submit button interactive, whatever the
button gets clicked, then adding in the option for submit.
And we could do this by selecting that form object because it does have a default action of submit using
the submit button so we can listen for the submit of the form.
And if the form gets submitted, then we can run the function validation, creating that function we're
passing in the event object and we're going to console logout that event object.
So when we refresh and we sign up of the form, you notice that the form submits.
So we want to prevent that default action so that we can do with E prevent default, which is a method
in JavaScript that removes out any of the default actions that would be typically in the elements such
as the submit button on a form.
So try that one more time.
And this time when we submit it, we see that we don't move to a new URL because we've got to prevent
default and we see the console content where we're outputting the event object and this is the event
object that gets past.
We've got default prevented as true.
So we see that this particular element, whenever the event has triggered the default, is prevented
because we don't want the form submitting and before we can run our validation.
So that's one of the important things here, is to make sure that we're not submitting before we can
run our validation.
So other thing that we need to do is apply a little bit of staling.
I don't want to focus too much time on the styling, but we do need to have a little bit of styling
for the different elements on the page.
And one of them that I want to introduce is Hyd, because by default, I want the height class to display
none.
So not showing the element that has a class of hide.
And also we can make the error look a little bit more like an error so we can set it as a color of red
and do the font size.
We can make the font size smaller if we want to zero point a.T.M and also maybe set the font family.
So that's different than the rest of the text on the page.
And also one last one.
Let's set the font style and you probably want to redo the styling.
So this was just some quick styling that we have that we see that we've got a little bit of styling
applied to our input forms, so updating our border color.
So this is one of the things that we want to make sure that we do have the ability to change with JavaScript
and that's going to be the border color.
So I want to do set is a default border color and we're going to update that and change that using JavaScript,
also setting a default with and also default.
So if we do default block, what's going to happen is by default, we're going to have a new line for
each one of the inputs and also want to make them slightly bigger.
So updating the font size so our input fields are bigger.
So let's refresh that and see what that looks like.
So now we've got our input fields.
We've got kind of these labels here.
They're not actual real labels, but they're just text here indicating what to expect within that input
field.
And then we still have our sign up button here, ready to move on to the next lesson for when we do
click the sign up button, we're invoking a function and this is the function that's going to actually
do our validation.
So all of that is still yet to come.
And coming up in the next lesson, we're going to start by checking to see what the element is that
checking through all the different elements, building out an object and then just making sure that
they are valid before we submit the form.
So all of that is still yet to come.