Necesito encontrar una manera de saber si un campo está vacío, usando javascript o html, aquí está el código:
<script> function setAction(form) { alert(form.name); return false; } </script>Un Snippet como este debería hacer el truco, poniendo inputx como el campo seleccionado para su prueba
if (inputtx.value.length == 0){ alert("empty form"); return false; } else alert("filled form"); return true; }Las alertas son solo para hacerle saber si está funcionando, también podría usar un
console.log("empty/filled form");y luego verifique en la consola del navegador web
Su fragmento de código es muy genérico, pero no es un problema. Para resolver esta tarea, deberá obtener el objeto de entrada HTML en JavaScript y extraer su longitud de valor para comparar si es mayor que cero. Tenga en cuenta que no puede obtener un objeto HTML si la ventana no está completamente cargada, por eso tendrá que lidiar con los eventos DOM.
Creando el formulario:
<form id="myForm" onSubmit="return false;"> <label for="name">First name:</label><br> <input type="text" id="nameField" name="name" value="Your Name"><br> </form>En este ejemplo, seleccioné la tecla Intro y se usará para verificar si el campo del formulario está vacío o no, por eso onSubmit="return false;" El evento estaba obligado a devolver falso, evitando recargar la página en el envío del formulario presionando la tecla Intro.
Creación de una parte del guión
window.onload = function windowLoaded(windowEvent) { const myInputFieldHtmlObject = document.querySelector("#nameField"); myInputFieldHtmlObject.onkeypress = function(event) { if(event.which == 13) { if(myInputFieldHtmlObject.value.length == 0) { alert("Fill please the name field."); } } } myInputFieldHtmlObject.onfocus = function(event) { myInputFieldHtmlObject.value = ""; } }Enlace el evento de carga al objeto de la ventana. Esto garantiza que todos los objetos HTML en la página se carguen antes de acceder a ellos con document.querySelector("#nameField") . Enlace al presionar una tecla y en los eventos de enfoque a cada uno de sus campos individuales en el formulario que necesita verificar. Al presionar la tecla, se verificará después de escribir el nombre y presionar la tecla Intro (valor 13) si el número de caracteres es al menos 1; de lo contrario, aparecerá un error. El evento de enfoque simplemente borrará el valor predeterminado de entrada de texto a nada.
Ejemplo completo:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>My Form Test</title> <style> html, body { width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden; } </style> <script> window.onload = function windowLoaded(windowEvent) { const myInputFieldHtmlObject = document.querySelector("#nameField"); myInputFieldHtmlObject.onkeypress = function(event) { if(event.which == 13) { if(myInputFieldHtmlObject.value.length == 0) { alert("Fill please the name field."); } } } myInputFieldHtmlObject.onfocus = function(event) { myInputFieldHtmlObject.value = ""; } myInputFieldHtmlObject.onSubmit = function(event) { return false; } } </script> </head> <body> <h2>My Form</h2> <form id="myForm" onSubmit="return false;"> <label for="name">First name:</label><br> <input type="text" id="nameField" name="name" value="Your Name"><br> </form> </body> </html>Si tiene un solo formulario y desea los números de índice de los campos vacíos:
function emptyFields(form) { return [...document.forms[form]].flatMap((field, index) => field.value.length < 1 ? [index] : []); } console.log(emptyFields('data')); <form name='data'> <input> <input value='not empty'> <input> <input> <input value='not empty'> <input> </form>