I am making a function in html that preventsyou from submitting if there is something wrong:
<form id="CreateAccount" action="start.html" method="GET">
<div class="main">
<div class="Title">
<h1>Enter your details.</h1>
</div>
<div class="inputs">
<label for="skool">SchoolName:</label>
<input type="text" id="skool" placeholder ="Put the school name" name="skool"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="username">Username:</label>
<input type="text" id="username" placeholder ="Username" name="username">
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="password">Password</label>
<input type="password" id="password" placeholder =" Password" name="password"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="confpassword">Confirm Password</label>
<input type="password" id="confpassword" placeholder =" Confirm Password" name="confpassword"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="email">Email:</label>
<input type="email" id="email" placeholder ="Email" name="email"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<button class="submitbtn" type="submit">Submit</button>
</div>
</div>
and javascript:
const formm = document.querySelector('#CreateAccount')
const school = document.querySelector('#skool');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const pwd = document.querySelector('#password');
const conf = document.querySelector('#confpassword');
formm.addEventListener("submit", (event) => {
if(isFormValid() == true){
window.location.assign("start.html");
console.log(2);
}
else{
event.preventDefault();
console.log(30);
}
validateForm();
console.log(30);
});
function isFormValid(){
const inputscontainers = document.querySelectorAll('.inputs')
let result=true;
inputscontainers.forEach((container) => {
if(container.classList.contains("error")){
return false;
}})
}
function validateForm(){
if(username.value.trim() == ''){
setError(username, 'Name cannot be empty');
}else if(username.value.trim() < 5){
setError(username, 'Idrc');
console.log(3);
}
else{
setSuccess(username);
}
if(email.value.trim() == ''){
setError(email, 'You forgot to fill in your email.');
}
else if(isEmailValid(email.value)){
setSuccess(email);
}else{
setError(email, "Provide a valid email");
}
if(pwd.value.trim()==''){
setError(pwd, "Password can't be empty");
}else if(pwd.value.trim().length<6 || pwd.value.trim().length>20){
setError(pwd, 'Length must be minimum 6 characters and max 20.');
}else{
setSuccess(pwd);
}
if(conf.value.trim() == ''){
setError(conf, 'This is an empty password');
}else if(conf.value !== pwd.value){
setError(conf, 'Passwords dont match');
}
else{
setSuccess(conf);
}
}
function setError(elementr, errorMessage){
const parents = elementr.parentElement;
parents.classList.add("error");
parents.classList.remove("success");
const paragraph = parents.querySelector('p').textContent = errorMessage;
}
function setSuccess(elementr){
const parents = elementr.parentElement;
parents.classList.add("success");
parents.classList.remove("error");
}
function isEmailValid(email){
const reg =/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i;
return reg.test(email);
}
When i click the submit button, It does not check if the code is valid, which really bug me:
LLike it reeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeally does.
My expected outcome is to redirect to another page if it is valid, which doesn happen! Help!