Hoy vamos a ver como mantenemos el botón de enviar desactivado hasta que el usuario complete del todo el formulario. Veamos como lo hacemos.







Creamos el formulario con sus correspondientes campos a rellenar, en este ejemplo le decimos que cuando el campo imput pierda el foco, valide para ver si nos activa el botón de enviar, es un método que funciona, pero no me gusta por el hecho de que para que se active el botón necesitaremos pinchar fuera del campo para que pierda el foco y valide, de todas formas, aquí os lo dejo por si lo queréis.

1. <form name="" id="b" method="post" action="">  
2.   <!-- creado por https://joason.com -->
3. <p>
4. <input type="text" name="a1" value="" onBlur="a('b')" id="a1" />
5. <label for="a1">Primer campo.</label>
6. </p>
7. <p>
8. <input type="text" name="a2" value="" onBlur="a('b')" id="a2" />
9. <label for="a2">Segundo campo.</label>
10. </p>
11. <p>
12. <input type="text" name="a3" value="" onBlur="a('b')" id="a3" />
13. <label for="a3">Tercer campo.</label>
14. </p>
15. <p>
16. <input type="reset" name="action" value="Borrar" class="button">
17. <input type="submit" name="action" value="Aceptar" id="bt"  class="button"             disabled="disabled">
18. </p>
19. </form>

Como veis hemos puesto el botón de enviar desactivado, de lo contrario no funcionaria esto, siempre estaría activado.

Este segundo ejemplo ejemplo lo considero mejor, pues como veréis en el código, valida al soltar cada tecla, entonces en el momento que el usuario este rellenado el ultimo campo, automáticamente se activará el botón, sin que el usuario tenga que andar haciendo click fuera, y podrá enviarlo sin mayor problema.

1. <form name="" id="b" method="post" action="">  
2. <!-- creado por https://joason.com -->
3. <p>
4. <input type="text" name="a1" value="" onKeyUp="a('b')" id="a1" />
5. <label for="a1">Primer campo.</label>
6. </p>
7. <p>
8. <input type="text" name="a2" value="" onKeyUp="a('b')" id="a2" />
9. <label for="a2">Segundo campo.</label>
10. </p>
11. <p>
12. <input type="text" name="a3" value="" onKeyUp="a('b')" id="a3" />
13. <label for="a3">Tercer campo.</label>
14. </p>
15. <p>
16. <input type="reset" name="action" value="Borrar" class="button">
17. <input type="submit" name="action" value="Aceptar" id="bt"  class="button"             disabled="disabled">
18. </p>
19. </form>

Y por ultimo creamos una función en javascript, en la cual al soltar la tecla comprobamos si los campos están vacíos, si no lo están, activamos el botón, de lo contrario, no hacemos nada.

1. function a(A) { 
2.     //creado por https://joason.com
3.     if (document.getElementById(A)) {
4.         var formObj = document.getElementById(A);
5.         if (formObj.a1.value !=""&&
6.             formObj.a2.value !=""&&
7.             formObj.a3.value !="" ) {
8.             formObj.bt.disabled = false;
9.         } else {
10.            
11.         }
12.     }
13. }

Os dejo este ejemplo para que veáis como funciona;







Espero que os haya sido útil.


Un saludo.