Cómo ocultar botón de formulario y mostrar gif de carga al enviar texto

  • Autor Autor klk3
  • Fecha de inicio Fecha de inicio
K

klk3

Iota
Verificación en dos pasos activada
Hola qué tal, tengo un formulario para que los usuario de una web puedan subir un texto compuesto por título, descripción e información adicional. De tal modo:

<form action="/nuevo-texto/" method="POST">

<input type="text" value="" id="texto_titulo" minlength="5" maxlength="50" required>
<input type="text" value="" id="texto_descripcion" minlength="5" maxlength="300" required>
<input type="text" value="" id="texto_extra">

<input type="submit" value="Enviar texto" id="boton_envio">
<img style="display:none" id="imagenCargador" width="50px" src="../cargador.gif"/>


</form>

La cosa es que quiero que, cuando pulsen el botón de enviar, el botón desaparezca y aparezca un gif de una rueda cargando, hasta que se haga el insert en la base de datos, y así que no pulsen varias veces el botón ya que puede tardar unos segundos. Para ello simplemente con jquery cuando el botón se pulsa, le pone la propiedad block a la imagen del gif para mostrarla, y display none al botón.

Sin embargo, los 2 primeros campos son requeridos y tienen que ser entre unos caracteres específicos. Por ejemplo, si no rellenan el segundo campo con al menos 5 caracteres y pulsan en botón de enviar, no se va a enviar el formulario, sin embargo el botón ya va a desaparecer y aparecer el gif de cargando. No va a dejar hacer nada más. ¿Cómo lo podría solucionar? ¿Habría que hacer una función para que comprobase los caracteres de cada campo, o hay alguna solución más sencilla?

Gracias y saludos.
 
Ponle un "onclick" al botón de submit, y en esa función que llame el evento, pones toda esa lógica que necesitas. Utiliza javascript para comprobar esos campos, y DOM para modificar los elementos.
Y si necesitas hacer el POST con esa ruta, puedes crear otro FORM invisible, y por DOM hacerle clic cuando la lógica del evento se haya superado.
 
Esto te puede servir:

JavaScript: 
(function (w,d) {
    var btn = d.querySelector('input[type="submit"]');
    btn.addEventListener('click', () => {
        if (d.querySelector('#texto_titulo').value.length >= 5) {
            btn.style.display = 'none';
            d.querySelector('#imagenCargador').style.display = 'block';
        } else {
            alert('5 caracteres minimo')
        }
    });
})(window, document)
 
Si tienes mas condiciones, tienes que modificar la linea con el if, para agregar las otras condiciones. Otra opción es usar bibliotecas JS especializadas para validar formularios. Puede ser mas facil para ti si no conoces tanto el JS.

Por ejemplo:

The best validation library for JavaScript - FormValidation

The best validation library for JavaScript
formvalidation.io formvalidation.io

Parsley - The ultimate JavaScript form validation library

Parsley, the ultimate frontend javascript form validation library
parsleyjs.org
 
Gracias por las respuestas, al final lo hice también con javascript, comprobando la longitud con value.length
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba