I have a task:
Write a JS function that validates the content of the form – the form should have at least one mandatory numeric field and one field that simply cannot be empty. If the validation is not passed through the field, display the appropriate information to inform the user. If validation fails, the function should return false, otherwise true
So, I’m trying to return a boolean value if the from fails validation and subsequently hide the forms. I’ve put the boolean value into the error and success functions but it doesn’t seem to work. I’ve tried to make the check inputs function return the boolean value but it didn’t work also.
I’m just trying to learn so any help regarding the best approach to this problem logically would be appreciated. I also understand that there might have been simple syntax issues, but this is also something I’m trying to get better at right now.
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove;
}
});
function checkInputs() {
const usernameValue = username.value.trim();
const numValue = num.value.trim();
const phoneValue = phone.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === '') {
setErrorFor(username, 'Username cannot be blank');
} else {
setSuccessFor(username);
}
if(numValue === ''){
setErrorFor(num, 'You must have a favorite number');
}else if(isNaN(numValue)){
setErrorFor(num, 'Not a number');
}else{
setSuccessFor(num);
}
if(phoneValue === '+48' || phoneValue === ''){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if(passwordValue === '') {
setErrorFor(password, 'Password cannot be blank');
}else if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(password2Value === '') {
setErrorFor(password2, 'Password cannot be blank');
} else if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
function test(){
if (isValid = true){
console.log('hi')
} else{
console.log('HEXYU')
}
}
Here is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form A</title>
</head>
<body>
<div class="container">
<div class="header">
<h2>Create Account</h2>
</div>
<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="phone">Phone number</label>
<input type="tel" placeholder="Your phone numbe" id="phone" value="+48"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" placeholder="email@youremail.com" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="passsword2">Password check</label>
<input type="password" placeholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button class="form-button" >Submit</button>
</form>
</div>
<script src="a.js"></script>
</body>
</html>
>Solution :
Two errors in your code:
- Use
remove()instead of remove - Use
==/===instead of=
Also, you could use required to let user unable to submit.
num input type will only accept number input and email type input will check if there is @ in the input. This will save a lot of if unnecessary if statement.
const form = document.getElementById('form');
const username = document.getElementById('username');
const num = document.getElementById('num');
const phone = document.getElementById('phone');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
let isValid;
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
if (isValid = true){
form.remove();
}
});
function checkInputs() {
const phoneValue = phone.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
setSuccessFor(username);
setSuccessFor(num);
setSuccessFor(email);
}
if(phoneValue === '+48' ){
setErrorFor(phone, 'Phone cannot be blank');
}else{
setSuccessFor(phone);
}
if (passwordValue.length < 8){
setErrorFor(password, 'Password cannot be less than 8 characters');
} else {
setSuccessFor(password);
}
if(passwordValue !== password2Value) {
setErrorFor(password2, 'Passwords does not match');
} else{
setSuccessFor(password2);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
isValid = false;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
isValid = true;
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
}
function test(){
if (isValid == true){
console.log('hi')
} else{
console.log('HEXYU')
}
}<form id="form" class="form">
<div class="form-control">
<label for="username">Username</label>
<input type="text" placeholder="Your username" id="username" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="num">Your favorite number</label>
<input type="number" placeholder="Your favorite number" id="num" required />
<small>Error message</small>
</div>
<div class="form-control">
<label for="phone">Phone number</label>
<input type="tel" required placeholder="Your phone numbe" id="phone" value="+48"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" required placeholder="email@youremail.com" id="email" />
<small>Error message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" required placeholder="Password" id="password"/>
<small>Error message</small>
</div>
<div class="form-control">
<label for="passsword2">Password check</label>
<input type="password" required typeplaceholder="Repeat your password" id="password2"/>
<small>Error message</small>
</div>
<button class="form-button" >Submit</button>
</form>
</div>