Hello camper,
I am a javascript newbie and I am trying to practice form validation that can tell the user to fill a blank input field if omitted. I can’t seem to get it right. I perceive the problem is from the setErrorFor function, seems I am not targeting the input elements and selector well. I am not too sure though. Please help me check my codes. What am I doing wrong?
<form id="form">
<h2>Let's work together</h2>
<p id="desc">We'd love to hear from you! Send us a message using the form or e-mail us. Your feedback will help us serve you better because your satisfaction is our joy.</p>
<ul>
<div class="aligned">
<li class="item">
<label for="name" class="aligned-label">First name</label>
<input type="text" class="aligned-input" id="fname" name="user_firstname">
<small class="error-msg">Error message</small>
</li>
<li class="item">
<label for="name" class="aligned-label">Last name</label>
<input type="text" class="aligned-input" id="lname" name="user_lastname">
<small class="error-msg">Error message</small>
</li>
</div>
<li class="item">
<label for="mail">E-mail</label>
<input type="email" id="mail" name="user_email">
<small class="error-msg">Error message</small>
</li>
</ul>
<button>Submit</button>
</form>
//css
h2, #desc{
margin-left: 20px;
}
ul {
list-style: none;
padding: 5px 20px;
}
li {
/* margin-top: 20px; */
margin-bottom: 10px;
padding-bottom: 20px;
/* position: relative; */
}
input[type="text"], input[type="tel"], input[type="email"], textarea {
border-radius: 4px;
padding: 8px;
margin-top: 10px;
box-sizing: border-box;
width: 100%;
background-color: #f7f2ee;
font-size: 18px;
}
.aligned{
padding: 0;
}
.success input{
border-color: #2ecc71;
}
.error input{
border-color: #e74e3c;
}
.error-msg{
visibility: hidden;
/* font-size: 0.85rem; */
}
.error .error-msg{
visibility: visible;
button{
background-color: #780e00;
color: #f7f2ee;
padding: 12px 20px;
margin: 30px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
font-size: 20px;
}
button:hover{
background-color:#3a1f0e;
}
//js
const form = document.getElementById('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const mail = document.getElementById('mail');
form.addEventListener('submit', (e) => {
e.preventDefault ();
checkInputs();
});
function checkInputs (){
//get the values from the inputs
const fnameValue = fname.value.trim();
const lnameValue = lname.value.trim();
const mailValue = mail.value.trim();
if(fnameValue === ''){
//show error
//add error class
setErrorFor(fname, 'Oops! User first name cannot be blank');
}else{
//add success class
setSuccessFor(fname);
}
}
function setErrorFor(input, message){
const item = input.parentElement; //to get the true class .item
const errorMsg = item.querySelector('.error-msg')
//add error message to small tag
errorMsg.innerText = message;
//add error class
item.className = 'item error';
}
function setSuccessFor(input){
const item = input.parentElement;
item.className = 'item success';
}