Validar formularios

[Jugoncan]

Pues bien, antes que nada os aconsejo que os leais este post para hacer los formularios: http://www.comocreartuweb.com/phpBB2/ftopic5806-0.html

Y bien, ahora os voy a enseñar como hacer para validar el formulario, es decir, que obliguemos al que lo rellene a que rellene a la fuerza un campo, o que tenga que poner a la fuerza un e-mail en alguno, etc.
Para que me entendais aquí os pongo un ejemplo hecho por mí (pero no me lleneis el correo de mensajes, jaja, sólo comprobar que si no lo rellenais no os deja enviarlo): http://dineroeninternet.freetzi.com/...earunaweb.html

Para empezar, os digo que para validar formularios necesitamos un código Javascript que depende del formulario, por lo que para simplificarlo mucho vamos a usar el dreamweaver, que lo simplifica muchísimo.

Abrimos el dreamweaver y abrimos la página en la que tengamos hecho el formulario. Acto seguido seleccionamos el botón de enviar, y le damos a Ventana/Comportamientos. Luego le damos al + del lado derecho y elegimos Validar formulario.

Entonces nos aparecerán todos los campos del formulario, y abajo varias opciones. Si seleccionamos cualquier campo le podemos poner las siguientes opciones:
Obligatorio, para que debas escribir algo a la fuerza ahí, o seleccionar algo si son botones que debas marcar.
Cualquier cosa, que lo que escribas puede ser lo que sea.
Numero, para que sólo te permita enviarlo si escribes sólo números.
Dirección de correo electrónico, para que sólo puedas escribir una dirección de correo.
Número del __ al __ , para que sólo puedas escribir números entre esas dos cifras.

Una vez acabados todos los campos le damos a aceptar y nos generará el código Javascript. Sin dreamweaver es muy difícil hacer sólo ese código, por lo que si quieres hacer esto te aconsejo que te lo bajes (yo te lo puedo pasar)

Ahora si teneis un poquito de práctica podeis traducir los mensajes de error tocando el código Javascript, y si no podeis lo poneis aquí y nosotros lo traducimos

Espero que os sirva.
Saludos, Juanma

Pos.: Más adelante pondré en este post como hacer lo de validarlo sin dreamweaver, os explicaré cómo hacer el código Javascript.

[Rubbnns]

Hola Jugoncan,

Y una vez todos los campos están correctamente cumplimentados y se envía el formulario con éxito ¿es posible introducir código javascript en la página html, a través del dreamweaver, de tal forma que te redireccione a otra página html?

Es para mostrar una nueva página con un mensaje diciendo que el formulario se ha enviado con éxito.


Gracias

[Jugoncan]

Sí, puedes hacer que lo mande a una página html, pero si hacer eso y no es una php no puedes poner el código php y por lo tanto no puedes hacer que te lo mande a tu correo.

[Rubbnns]

Si el que cumplimenta el formulario tiene instalado el outlook o algún otro programa de ese tipo en su ordenador, entonces sí que me llegan los datos a mi correo aunque no utilice ninguna página php en el proceso.

Por lo que sigo queriendo saber el script necesario para que redireccione a otra página html una vez el mensaje se haya enviado con éxito.

Saludos

[kaotick]

Bueno aqui pongo como hacerlo con javascript, es sencillo y facil, perfecto pa los que usan html-kit u otro que no sea dreamweaver.
Primero el codigo:

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var form=document.getElementById('formulario');
addEvent(form,'submit',validar,false);
}

function validar(e)
{
var nom=document.getElementById('usuario');
var cla=document.getElementById('clave');
if ( nom.value=='' || cla.value=='' )
{
alert('debe ingresar los datos');
if (e.preventDefault)
e.preventDefault();
return false;
}
else
return true;
}

function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captur a);
return true;
}
else
return false;
}

Esta echo para validar un formaulario de usuario y contraseña,en el formulario es importante poner ademas del name, un id="nombre",para que funcione con javascript.Ejemplo de un input de texto:
<input type="text" name="usuario" id="usuario">
La parte de color azul es el id de cada formulario,cambiando el nombre de la variable y el nombre de la id del input de texto se pueden poner tantos como quieran.Ejemplo:
Cambiar var nombre=document.getElementById('usuario'); por
var email =document.getElementById(' usuario ');
el color verde es el nombre de la variable,miembras el amarillo es el id del formulario.
La parte con color rojo es la parte que valida el formulario, tienes que poner || nombre-de-variable=''(las '' son dos comillas simples) por cada input.

[xiniyo2]

no me ha quedado muy claro... :?

os pongo aqui mi formulario a ver si podeis echarme una mano:

<?php
$sendTo = "joseqj@terra.es";
$subject = "primerformulario";
$nombre = $_POST["nombre"];
$email = $_POST["email"];
$telefono = $_POST["telefono"];
$escriba = $_POST["escriba"];
$categoria = $_POST["categoria"];
$headers .= "";
$message = "\nNombre: " . $nombre . "\nEmail: " . $email . "\ntelefono: " .$telefono ."\nescriba: " . $escriba . "\ncategoria elegida: " . $categoria;
mail($sendTo, $subject, $message, $headers);
?>

y en html:

<div id="formulario">
<h1>FORMULARIO</h1>
<form enctype="multipart/form-data" method="post" action="formulario.php" name="form1">


Nombre: <input name="nombre" type="text" size="30" maxlength="40" value="" /></p>


E-Mail: <input name="email" type="text" size="30" maxlength="40" value="" /></p>


Tlfno.: <input name="telefono" type="text" size="30" maxlength="40" value="" /></p>


Seleccione: <select name="categoria">
<option value="infografia" selected="selected">Infografía</option>
<option value="diseñografico">Diseño gráfico</option>
<option value="web">Web</option>
<option value="proyectosconstruccion">Proyectos construcción</option>
<option value="otro">Otro</option>
</select>
</p>


<textarea name="escriba" cols="30" rows="4">Escriba aquí su comentario...</textarea></p>


<input name="" type="submit" value="Enviar" />
<input name="" type="reset" value="Restablecer" /></p>
</form>

</div>

[sjj]

Muy claro el tutorial pero no me funciona...je! Cuando selecciono el botón enviar el signo de más me aparece de modo pasivo y no me da la opción de validar formulario. Alguien podría decirme a que puede deberse esto?
Muchas gracias

[Kangui3]

Ola,
Yo todavia estoy creando mi página web no la tengo alojada en ningun servidor, y no se si me falla el codigo o es cosa de otra cosa
gracias
salu2