Activar botón Enviar basado en la validación

20 julio, 2016 BlogUneWeb Programación

Activar botón Enviar basado en la validación

Ahora vamos a ver acerca de cómo Activar botón Enviar basado en la validación de formularios. En el ejemplo anterior, hemos visto la validación de formularios usando PHP en pulsar el botón Enviar.

Tenemos un ejemplo de un formulario HTML con el botón enviar discapacitados. Y entonces, estamos permitiendo que mediante la validación de campos de formulario utilizando jQuery.

Formulario HTML con el botón Enviar para discapacitados

Este código muestra el formulario HTML en la que el botón de envío está deshabilitado inicialmente.

<form  ID = "frm"  método = "post" > 
   <div  clase = "input-grupo" > Nombre <span  clase = "nombre de validación validation-error" ></span></div> 
   <div> 
        <input  type = "text"  name = "name"  id = "name"  class = "input-control"  onblur = " validate () "  /> 
   </div>
    
   <div  clase = "input-grupo" > correo electrónico <span  clase = "e-mail de validación validation-error" ></span></div> 
   <div> 
		<input  type = "text"  name = "email"  id = "email"  class = "input-control"  onblur = " validate () "  /> 
   </div>

   <div> 
        <button  type = "submit"  name = "btn-submit"  id = "btn-submit"  disabled = "disabled" > Submit </button> 
    </div> 
</form>

jQuery validación para activar / desactivar el botón Enviar

Este script jQuery valida el texto del nombre y los campos de entrada de correo electrónico. Se comprueba si los campos de ambos no están vacíos. Y también comprobar si el campo de correo electrónico está conteniendo dirección de correo electrónico válida mediante el uso de un patrón de expresión regular. Una vez, la forma se valida entonces se devuelve true para activar botón de envío.

<script> 
	función de validación ()  {
		
		var válida =  verdadero ; 
		válida = checkEmpty ( $ ( "# nombre" )); 
		válida = válida && checkEmail ( $ ( "#email" ));
		
		$ ( "#btn-submit" ). attr ( "disabled" , true ); 
		if ( valid )  { 
			$ ( "#btn-submit" ). attr ( "disabled" , false ); 
		} 	
	} 
	function checkEmpty ( obj )  { 
		var name = $ ( obj ). attr ( "name" ); 
		$ ( "." + name + "-validation" ). html ( "" ); 	
		$ ( obj ). css ( "border" , "" ); 
		if ( $ ( obj ). val ()  ==  "" )  { 
			$ ( obj ). css ( "border" , "#FF0000 1px solid " ); 
			$ ( ". " + Nombre + " -Validación " ). Html ( " Obligatorio " ); 
			volver  falsa ; 
		}
		
		volver  verdadera ; 	
	} 
	la función checkEmail ( obj )  { 
		var resultado =  verdadero ;
		
		var nombre = $ ( obj .) attr ( "nombre" ); 
		$ ( "." + nombre + "-Validación" ). html ( "" ); 	
		$ ( obj ). css ( "frontera" , "" );
		
		resultado = checkEmpty ( obj );
		
		si (! resultado )  { 
			$ ( obj ). css ( "frontera" , "# FF0000 1px solid" ); 
			$ ( "." + nombre + "-Validación" ). html ( "Obligatorio" ); 
			volver  falsa ; 
		}
		
		var email_regex =  /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,3})+$/ ; 
		result = email_regex . test ( $ ( obj ). val ());
		
		si (! resultado )  { 
			$ ( obj ). css ( "frontera" , "# FF0000 1px solid" ); 
			$ ( "." + nombre + "-Validación" ). html ( "no válido" ); 
			volver  falsa ; 
		}
		
		retorno de resultado ; 	
	} 
</ script>