JavaScript: Capturar el Envío de un Formulario

En este tutorial, me gustaría mostrarle cómo captar un clic en el botón de envío de un formulario HTML. Un posible campo de aplicación sería dinámicamente verificar los valores que un usuario ha escrito antes de enviarlos, por ejemplo para mostrar un mensaje al usuario si es necesario.

Me gustaría presentar dos soluciones diferentes para esto: la primera es usar JavaScript puro, la segunda solución funciona con jQuery.

El Formulario HTML

Para la demostración, utilizamos dos formas simples. El primero debería ilustrar el modo JavaScript puro, el segundo el de jQuery.

<h1>JavaScript</h1>
<form id="form_js" method="post" action="">
  <input id="inp_js" type="text" value="">
  <input type="submit" value="Guardar">
</form>

<h1>jQuery</h1>
<form id="form_jquery" method="post" action="">
  <input id="inp_jquery" type="text" value="">
  <input type="submit" value="Guardar">
</form>

Ambos formularios constan de un botón de envío y un campo de entrada de texto. Para poder abordar los formularios fuera del script más adelante, hemos aplicado los IDs únicos "form_js" y "form_jquery" a los formularios. Además, también los campos de entrada tienen cada uno un ID único.

Script que utiliza JavaScript puro

Primero, queremos echar un vistazo a la solución JavaScript pura. Después de cargar la página completa (window.onload), usamos document.getElementById() para definir una función OnSubmit propia para el formulario con el ID "form_js".

window.onload=function() {

   document.getElementById('form_js').onsubmit=function() {	
      if (document.getElementById('inp_js').value == '') {
         alert('Por favor complete el campo.');
         return false;  
      } else {
         return true;	  
      }  
   } 

}

Esta función verifica el valor del campo de entrada para ver si está vacío. En caso afirmativo, se muestra un cuadro de mensaje que contiene una advertencia y se devuelve "false". Esto garantiza que el campo no se pueda enviar. Sin embargo, si el campo contiene texto, devolvemos "true" para que se envíe el formulario.

Script que utiliza jQuery

El siguiente código conduce al mismo resultado. Sin embargo, esta vez usamos jQuery. Nuevamente, nuestra función no debe configurarse antes de que se cargue la página HTML completa. Esto se puede hacer usando $(document).ready() en el mundo jQuery.

$(document).ready(function() {	
			
   $('#form_jquery').submit(function(e){  
      if ($('#inp_jquery').val() == '') {
         e.preventDefault();  
         alert('Por favor complete el campo.');  
      }  
   });	
					   
});	

Luego, capturamos el envío del formulario con jQuery (formulario con el ID form_jquery). Nuevamente, verificamps en este punto si nuestro campo de entrada contiene un valor que no esté vacío. Si no, nuevamente mostramos nuestra notificación de advertencia y llamamos a .preventDefault(). Con esta función, podemos evitar el envío del formulario.

Aviso

Verificar un formulario con JavaScript no puede sustituir una verificación en el sitio del servidor. JavaScript es útil para crear algunos mensajes de advertencia para el usuario. Sin embargo, la verificación de los valores siempre debe realizarse dentro del script PHP en el servidor. Debe tener en cuenta que JavaScript se puede desactivar y manipular fácilmente.