Validar un formulario con javascript

<form action="guardo.php" id="formulario">
        <label>
            <em>Nombre completo</em>
            <input type="text" name="username"> 
           <span id="span_username"></span>
        </label>
        <br><br>
        <label>
            <em>Contraseña</em>
            <input type="password" name="password"> 
            <span></span>
        </label>
        <br><br>
        <label>
            <em>Email:</em>
            <input type="email" name="email"> 
            <span></span>
        </label>
        <br><br>
        <button type="submit">Guardar</button>
    </form>
<script src="app.js"></script>

const userNameField = document.querySelector("[name=username]");
const passwordField = document.querySelector("[name=password]");
const emaildField = document.querySelector("[name=email]");
const span_username = document.getElementById("span_username");
const form = document.getElementById("formulario");

//console.log(userNameField,passwordField,emaildField);

form.addEventListener("submit", function(e){
    e.preventDefault()
    var entrar = false; // declarar e inicializar variable

userNameField.addEventListener("blur", function(e){
const fiel = e.target;    
const fielvalue = e.target.value;
if(fielvalue.length === 0 ){
 console.log(fielvalue);
fiel.classList.add("invalid"); // fiel, nomnre del input
span_username.classList.add("error"); // a. nombre del span
span_username.innerText="Nombre requerido";// a. nombre del span

}else{
     fiel.classList.add("valido"); // fiel, nomnre del input 
    span_username.classList.remove("val"); // a. nombre del span
    span_username.innerText="";// a. nombre del span
    entrar= true;
   
   
   
}
if(entrar){

  }else{

    this.submit();
  }
});
});