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.
<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.