Html – form validation using javascript,if the enter values are not valid the input field has to show alert using css

//app.js


let form2=document.getElementById("form");
let userName2=document.getElementById("userName");


form2.addEventListener("submit",(e)=>{
    e.preventDefault();
    validateInputs();
  })


  function validateInputs(){
    let userNameVal=userName2.value.trim();

    if(userNameVal === ""){
        setError(userName2,"user name is required");
      }
      else{
        setSuccess(userName2);  
      }
  }
function setError(element,message){
  let inputGroup=element.parentElement;
  let errorElement=inputGroup.querySelector("small");
  errorElement.innerText=message;
  inputGroup.classList.add("error");
  inputGroup.classList.remove("success");
}

function setSuccess(element){
  let inputGroup=element.parentElement;
  let errorElement=inputGroup.querySelector("small");
  errorElement.innerText="";
  inputGroup.classList.add("success");
  inputGroup.classList.remove("error");









//css style



.text-box{
    padding-bottom: 10px;
    position: relative;
    
}
 .text-box input{ 
    width: 70%;
    display: block;
   margin-left: 60px;
   font-size: 16px;
   margin-top: 5px;
   padding: 10px;
   border-radius: 6px;
}
.text-box input:focus{
    outline: none;
    border:1px solid rgb(238, 86, 238);
}
.text-box.success input{
    border:1px solid rgb(3, 101, 10);
}
.text-box.error input{
    border-color: rgb(205, 20, 4);
} 

.text-box i{
    visibility:hidden;
    position: absolute;
    top:40px;
    right:90px;

}
.text-box.success i.fa-circle-check{
    visibility: visible;
    color: rgb(3, 101, 10);
}
.text-box.error i.fa-circle-exclamation{
    visibility: visible;
    color: rgb(205, 20, 4);
}
.text-box small{
    color: red;
    position: absolute;
    visibility: hidden;
    left: 0;
    bottom:0;
}
.text-box.error small{
    visibility: visible;
}
#submit{
background-color: burlywood;
color: white;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
cursor: pointer;
font-size: 18px;
padding: 10px;
margin-left: 320px;
margin-top: 10px;

}

//index.html


<section class="formContainer">

            <form class="form" id="form">
                <h1>Student Form</h1>
                <div class="text-box">
                    <label for="userName">User Name</label>
                    <input type="text" id="userName" name="userName">
                    <i class="fas fa-circle-check"></i>
                    <i class="fas fa-circle-exclamation"></i>
                    <small>Please enter a user Name</small>
                </div>



                <input type="button" id="submit" value="REGISTER">
            </form>
        </section>

hi, i try to validate the form, i just include one input field with one button ,if user enter the username and click the register button ,the input field border has to change into green and should show the check icon in green and if the user not enter username and click the register button the input field shoud turn into red and has to show the exclamation mark in red and should show the error message in small tag,But i’m not getting any of it

please reply these code and make me clear