User registration verification using js. JS doesn't show any errors, it just doesn't run
unusual phenomenon
Tried using simple JS to validate user password when registering, but the page doesn't show any errors and runs as if the JS doesn't even exist (although it's added at the end of the php file <script src="script.js"></script>). Any suggestions on what I'm doing wrong are welcome as I can't seem to figure it out. I'm completely new to JS but need to do this in school trying to implement it in the easiest way possible.
JS example:
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('registerForm')
const errorElement = document.getElementById('error')
const button = document.getElementById('signUp')
if (button) {
form.addEventListener(button, (e) => {
let messages = []
if (name.value === '' || name.value == null) {
messages.push('Name is required.')
}
if (password.value.length <= 6) {
messages.push('Password must be longer than 6 characters.')
}
if (password.value.length >= 20) {
messages.push('Password must be less than 20 characters.')
}
if (messages.length > 0) {
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
})
}
Code snippet from html:
<form id="registerForm" class="register" method="post">
<div id = "signup_form" class="textboxes">
<input id="name" type = "text" name="name" placeholder="Name">
<input id="email" type = "email" name="email" placeholder="Email">
<input id="password" type = "password" name="password" placeholder="Password">
<input id="repeat_password" type = "password" name="password_again" placeholder="Repeat password">
<button id="signUp" type="submit" name="btn-register">Sign Up</button>
<div id = "error"></div>
Sven writes code
You are just missing a few things. The HTML is malformed, to add an event listener you need to use the followingtarget.addEventListener(type, listener [, options]);
Here you want to have the "target" as the button because that will trigger the action. See here for more information .
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('registerForm')
const errorElement = document.getElementById('error')
const button = document.getElementById('signUp')
if (button) {
button.addEventListener('click', (e) => {
let messages = []
if (name.value === '' || name.value == null) {
messages.push('Name is required.')
}
if (password.value.length <= 6) {
messages.push('Password must be longer than 6 characters.')
}
if (password.value.length >= 20) {
messages.push('Password must be less than 20 characters.')
}
if (messages.length > 0) {
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
})
}<form id="registerForm" class="register" method="post">
<div id="signup_form" class="textboxes">
<input id="name" type="text" name="name" placeholder="Name" />
<input id="email" type="email" name="email" placeholder="Email" />
<input id="password" type="password" name="password" placeholder="Password" />
<input id="repeat_password" type="password" name="password_again" placeholder="Repeat password" />
<button id="signUp" type="submit" name="btn-register">Sign Up</button>
<div id="error"></div>
</div>
</form>