I want to use custom error messages on a login page (Such as required field, incorrect e-mail adress)
I used spring security to login and javascript to validate the fields. The validation error messages are working, but the login process does not work anymore. I think because of; e.preventDefault();
How do i continue the login process when all the fields are valid.
This is my js file;
"use strict";
window.onload = function () {
const form = document.getElementById('form');
const email = document.getElementById('email');
const password = document.getElementById('password');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
inputControl.classList.remove('success')
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function validateInputs() {
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
if (emailValue === '') {
setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}
if (passwordValue === '') {
setError(password, 'Password is required');
} else {
setSuccess(password);
}
}
}