Activar botón Enviar basado en la validació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>
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros