Tengo el siguiente campo de entrada con validación js para ingresar un nombre y cuando el campo se deja en blanco aparece un mensaje de error que es lo que necesitaba, sin embargo, cuando ingreso un nombre, acepta la entrada en mi formulario, sin embargo, aparece el mismo mensaje de error. brevemente.

 function myFunction() { let x = document.getElementsByName("first_name")[0].value; let text; text = ""; if (x == '' || x == null) { text = "Input not valid"; } document.getElementById("first_name_errors").innerHTML = text; } document.addEventListener('invalid', (function() { return function(e) { e.preventDefault(); document.getElementsByName("first_name").focus(); }; })(), true);

 <input type="text" name="first_name" placeholder="first name" name class="input_fields" required> <div class="error-message" id="first_name_errors"></div> <input class="save_btn" type="submit" value="Save" name="save_fname" onclick="myFunction()">

¿Cómo puedo arreglar esto?

Además, tengo la intención de usar esta plantilla para otros campos, como los campos de correo electrónico y contraseña, suponiendo que la parte principal de este código en la que debo centrarme en la adaptación es:

 let text; if (x == '' || x == null) { text = "Input not valid"; }

Se agradece mucho la ayuda/consejo. Gracias