Form validation with js

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';
}

Hi there,

Maybe there’s a reason you need to do this with Javascript, but just so you know, you can do this with the require attribute in HTML.

Require.

Thanks for reaching out. I know about html form validation. But I want to do this with javascript as practice. The list item is supposed to be a parentElement to the input element right? I can’t figure out why its not working.
I want to add the error message to the class “item” and mark it success if correctly filled.
Any idea how I can get this done?

What exactly is not working?
You’re currently only checking fnameValue and it seems to work.
https://codepen.io/jenovs/pen/QWKBeBv?editors=1010

The fname value is looking checked because of the css style I added for the class success and that of error too. When I remove the classes to check if the javascript success and error classes I added is working, it doesn’t work. The error and success classes should be able to be added on the input fields when you type on each of the input fields and inform the user accordingly for either success (when the field is properly filled) or error with a message (when its not properly filled).
@jenovs

Wow, I just checked now on codepen and it works there for fname as the only value I have added. But when I check on my browser (chrome) from my code editor it doesn’t work. Any ideas why this is happening?
@jenovs
Thanks a lot.