Change language

How to display JavaScript form error message in html form

How to display JavaScript form error message in html form

Hello guys and welcome back.

In this video, we are going to see, how to display form errors with javascript.

This is not an input validation lesson, we just going to see how to structure the form, to display errors under each input field.

If you want to follow along, there is a link in the description bellow, to download the start files.

Now lets take a look in the browser to see, what we are going to code.

I am going to check for empty fields, so i have some kind of error to display.

Please watch the browser, there is nothing here for me to say, you will understand what we are up to.

When all the input fields have values, and the passwords match, then we display the success message.

Now lets change browser tab, to have the start file in view.

Nothing is working here.... yet.

Now lets look at the editor, where i have three files, I have a stylesheet with a basic style, applied to the form.

I have an empty javascript file, and my home page.

i have a link to the stylesheet, and a link to the javascript file.

Now inside a page section i have my form element.

Let me explain here what we have, it seems overwhelming, but basically we repeat ourselves here in every input field.

So lets start, i have a form with a name of sign-up-form, the first element in the form is the success message placeholder.

The first input field is the email.

We have above the input field a label, that is telling the user what to do, and under the input field we have the error placeholder.

The error placeholder has a generic class of "error", so we can target and style all error elements.

And it has a unique class of "email-error", so we can target the element and display any error, associated with the email input field.

We have the same structure for every input field.

Except the gender section, but we dont have any error placeholders here.

Here is the submit button.

And last we have a generic error placeholder, to output any errors not associated with the input fields.

Now lets jump to the javascript file, to start the error handling.

so the first thing i need to do, is to get access to the form element.

I am targeting the form by its name attribute Next i will assign an onsubmit event-listener to the form, to catch the form values.

I will pass the event object as an parameter, because i need to stop the form submitting to the server.

The prevent-default method will stop the form sending the data to the server.

I am going to start the check with the email.

I will use an if statement to check, if the email value is an empty string " ".

If so, we run the function showError, where i will write in a moment.

The showError function takes to arguments, the first argument targets the errors placeholders css class.

And the second argument is the message that we want to display.

Also we return false and stop the submit action.

lets write the showError function.

Now, as i said the showError function takes two parameters.

With the first parameter we target the error element.

Here i am using the querySelector to target the error element, so i can add the "display-error" css class.

I show you in a moment what this class is doing.

And we display the error message.

Now, lets go to the css file, and find the "display-error" class.

When we add this class to the error element, we make the element visible, because the error element is hidden by default.

Also we creating some space around, so everything is evenly spaced out.

We see that the error element is hidden by default.

Now i need one more function to hide the error elements.

I am going to write the clearError function, to set the error elements to their default state, every time the form is submitted.

Now lets see what we have here.

I use the querySelectorAll method to target all the error elements.

The querySelectorAll method returns an array who holds all the error elements.

Next i will loop trough the errors array, and remove the "display-class" from every error element.

It doesnt matter if the element has the "display-class" added or not.

Javascript will not throw an error.

So lets check out in the browser our first field error.

And here is our error.

Lets type an email in the field.

And the error is gone.

Everything is working right.

Basically the most work is done.

Everything else is just copy and paste, with some changes in the css classes and messages.

i will work quietly copying and pasting.

To target the confirm password name attribute, i have to use square brackets, because we separating the words with a hyphen. We are checking if the two passwords match.

And if everything is fine and we have no errors, we unhide the success element, and displaying the success message.

As we had a "display-error" class in the css file, so we have a "display-success" class for the success element.

Now that is all the code we need, lets do a final browser check.

And we reached the end of todays video.

I hope you liked it, and you find it helpful, because this is all about, something to be helpful.

Thanks for watching guys.