Como validar un formulario con javascript y php [para principiantes]
Este es un ejemplo muy básico de como validar un formulario con javascript, recibir los datos con php y mostrarlos por pantalla. A medida que vayamos incrementando el numero de scripts iremos aumentando la complejidad de los mismos.
$resultado = ‘Como validar un formulario con javascript y php. Un ejemplo muy fácil.’;
if( isset($_POST[‘color’], $_POST[‘comentario’], $_POST[‘casilla’]) ){
$resultado = ‘Has escogido el color ‘.$_POST[‘color’]. ‘y has dejado este comentario :<br /><blockquote>’.$_POST[‘comentario’].‘</blockquote>’;
}
?>
<html>
<head>
<script type="text/javascript">
function Validar(Objeto_Formulario){
if(Objeto_Formulario.color.value=="")
alert(‘Debes seleccionar un color.’);
else if(Objeto_Formulario.comentario.value=="")
alert(‘Debes escribir un comentario.’);
else if(Objeto_Formulario.casilla.checked==false)
alert(‘Debes seleccionar la \’Casilla obligatoria\’.’);
else
Objeto_Formulario.submit() //se envia el formulario
}
</script>
</head>
<body>
<div style="background-color:#CCCCCC;"><?=$resultado?></div>
<div>
<form method="post" action="">
Color: <select name="color" id="color">
<option value="">Seleccione un color…</option>
<option value="rojo">Rojo</option>
<option value="azul">Azul</option>
</select><br />
Comentario: <input type="text" name="comentario" id="comentario" /><br />
Casilla obligatoria: <input type="checkbox" name="casilla" id="casilla" /><br />
<input type="button" onclick="Validar(this.form)" name="enviar" value="Enviar" />
</form>
</div>
</body>
</html>
Muchas gracias! es lo que andaba buscando!
se ve muy sencillo, pero el hecho de usar el evento alert no es practico, alguna otra manera para trabajar que el mensaje de error salga en algun div ??
@kendatos
Puedes agregar un div al html:
<div id=”alertas” style=”color:red”>
Y luego cambiar la funcion javascript por algo asi:
function Validar(Objeto_Formulario){
if(Objeto_Formulario.color.value==”")
document.getElementById(‘alertas’).innerHTML =’Debes seleccionar un color’;
else if(Objeto_Formulario.comentario.value==”")
document.getElementById(‘alertas’).innerHTML =’Debes escribir un comentario’;
else if(Objeto_Formulario.casilla.checked==false)
document.getElementById(‘alertas’).innerHTML =’Debes seleccionar la \’Casilla obligatoria\”;
else
Objeto_Formulario.submit() //se envia el formulario
}
Saludos!