Autor Tema: Validar formulario primero con javascript en cliente y luego con php servidor  (Leído 13259 veces)

gatoher

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 83
    • Ver Perfil
Hola a todos, tengo una duda que me esta dando vueltas por la cabeza y no consigo ver la luz. He buscado por internet y he visto soluciones pero no me queda claro. A ver, yo se validar formularios con PHP y Js. Pero no tengo claro como hacerlo con los dos, primero en Js y luego PHP.

   Un ejemplo que he visto en internet es un formulario simple con 4 campos y 3 obligatorios, y en el onblur validaba con jQuery, y luego al dar al boton enviar validaba el PHP.

   La parte de PHP esta clara, pero como hacer la validación de Js. Osea ¿cuando se llama al script de Js?. No se si me explico, a mi lo único que se me ha ocurrido es dejar el boton de enviar inactivo hasta que el Js lo valide. ¿Esa sería una buena solución?

   Si en lugar de hacer la validación en el onblur, se hiciera al dar al boton de enviar, se podría hacer la validación primero en Js y si es correcta llamar al script PHP desde el Js para que entonces lo valide el PHP.

   La verdad que me he trabado ahi, o se como hacerlo salvo como he comentado de dejar el boton de enviar inactivo.


« Última modificación: 11 de Marzo 2016, 09:53 por César Krall »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2074
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Hola!

Para validar con JavaScript primero tienes que realizar la validación dejando anulado el envío del formulario (esto se puede hacer con código JavaScript) y luego cuando se verifique la validación proceder al envío del formulario (que también se puede hacer con código JavaScript).

Todo esto lo tienes explicado en este curso: https://www.aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206, te recomiendo seguirlo

Saludos!
Responsable de departamento de producción aprenderaprogramar.com

gatoher

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 83
    • Ver Perfil
   Hola Cesar, gracias por responder. A ver, lo de validar como te he comentado ya lo tengo claro. Pero como tú muy bien dices:

Citar
tienes que realizar la validación dejando anulado el envío del formulario (esto se puede hacer con código JavaScript) y luego cuando se verifique la validación proceder al envío del formulario (que también se puede hacer con código JavaScript).

   Entonces, estoy igual. A ver cuando yo validaba tanto con Js o PHP siempre utilizaba el boton de enviar para que la validación se hiciera. Comprendo dejar el boton de enviar anulado hasta que Js lo valide,pero ¿como llamo entnoces a Js para que empiece la validación?

   Imaginemos un formulario con 4 campos, 1 de los campos no es obligatorio,
el resto tienen una etiqueta que pone que son obligatorios. Bien el usuario los rellena todos, ¿como llamo o en que evento llamo al script Js para comenzar la validación?

   He pensado que en el último campo obligatorio, en el evento onblur llame a los metodos de validación y si es correcto active el boton enviar.

   ¿Esta solución es correcta?
 

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola.

Como dice Cesar si buscas en el enlace que te dejó resolverías tu duda, de todas formas te dejo un ejemplo..

No es necesario desactivar el botón enviar, la validación puede empezar una vez que pulses ese botón y a continuación mediante el código javaScript se hace la validación de datos, y dependiendo de si son correctos o no, devolverá true o false al formulario.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<script type="text/javascript">
function comprobarDatosFormulario(){
var comprobacion = false;
var expReg = /[\s\S]{3}/;
var nombre = document.getElementById('nombreFormUsuario').value;
if(!expReg.test(nombre)){
alert('Datos incorrectos, el formulario NO se enviará');
return false;
}else{
alert('Datos correctos, el formulario SI se enviará');
return true;
}
}
</script>
</head>
<body>
<form name ="formularioUsuario" method="get" onsubmit="return comprobarDatosFormulario()">
<h2>Formulario ejemplo</h2>
<label>Nombre:<input id="nombreFormUsuario" type="text" name="nombre" /></label>
<label><input id ="botonEnvio1" type="submit" value="Enviar"></label>
</form>
</body>
</html>

Saludos.
« Última modificación: 11 de Marzo 2016, 16:46 por pedro,, »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Hola pedro,, no es por corregirte pero al ver tu código me surge una duda.
En onsubmit es necesario que tengas que poner un return con la llamada de la función, o simplemente con la llamada de la función valdría. Es que viendolo así me ha surgido la duda.
Saludos.

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Buenas bermartinv.

En este caso, si no pones return, el formulario no esperará ninguna respuesta y enviará el formulario.

 ;D

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Lo siento, pedro,, pero no lo entiendo. Explicamelo de otra manera.
Si hacemos onsubmit = "comprobarDatosFormulario()", tenemos que onsubmit es true.
Y de la otra manera, onsubmit = "return comprobarDatosFormulario()" , a donde devuelve ese true.

Explicamelo, porque no entiendo la diferencia entre uno y otro. :-[

Gracias

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Escribir onsubmit="return comprobarDatosFormulario()", es como si el formulario pidiese permiso a la función comprobarDatosFormulario() para poder ser enviado. Precisa que la función le devuelva true, en caso contrario el formulario no se enviará.

Al escribir onsubmit = "comprobarDatosFormulario()"  lo único que hacemos es que cuando se envíe el formulario, se iinvoque dicha función y si en esa función no se especifica alguna otra forma de parar el envío, el formulario se enviará.

De todas formas bermartinv siguiendo el curso de javascript como lo llevas en breve saldrás de dudas.

Saludos.


bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Ahora bastante mejor.  ;D
Muchas gracias.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".