Form Validation in JavaScript

https://coruscating-liger-8cfd20.netlify.app

  • I have no domain for this site. It is a practice site

I am seeking for an error message to pop up after clicking the submit button with an icon relative to the error; however, it is not registering. Below is my code, is there something I am missing?

html

Redirect PRactice

Create Account

Name

Error Message

Email

Error Message

Password

Error Message

Confirm Password

Error Message

Submit

<script src="app.js"></script>
const form = document.querySelector('#create-account-form'); const usernameInput = document.querySelector('#username'); const emailInput = document.querySelector('#email'); const passwordInput = document.querySelector('#password'); const confirmPasswordInput = document.querySelector ('#confirm-password'); form.addEventListener('submit' , (event) =>{ event.preventDefault(); validateForm(); }); function validateForm() { //USERNAME if(usernameInput.value.trim() == '') { setError(usernameInput, 'Name can not be empty'); } //EMAIL //PASSWORD //CONFIRM PASSWORD function setError(element, errorMessage){ const parent = element.parentElement; parent.classList.add('error'); } The better the post - the faster the answer.

General questions about coding that aren’t Netlify related are probably better asked elsewhere.

That said, looking at the code you have deployed I can see that the file doesn’t end correctly.

Uncaught SyntaxError: Unexpected end of input (at app.js:29:2)

The closing } that you have at the end of the file is closing the setError function, but nothing is closing the validateForm function.

I can’t advise about the rest of the functionality of the code, but that’s the initial Syntax Error that you’re currently experiencing.

1 Like

You are absolutely correct, it works and I thank you. For future references, what can I do to make my posts Netlify related? I do use Netlify as my server, but I didn’t make this page live because I intend on putting it on my site once I have the coding correctly.

@MM6th It’s no problem at all!

In terms of getting support, it’s not so much about “making your posts Netlify related”, just that the question/issue should be about something that Netlify have created or manage, since this isn’t a general “coding support forum”.

A good guide would be if you couldn’t understand something in the Netlify documentation or if you had something working locally but couldn’t get it to run on Netlify.

I understand it can be difficult to determine the root cause of issues, but if it’s just a general issue of struggling to write/understand/debug code, then it’s probably better suited to be asked somewhere general like Stack Overflow.

Understood. Thanks again, that makes perfect sense.