 |
Tutorial HTML-CSS-JAVASCRIPT appsRegnare.com |
 |
|
Tutorial HTML-CSS-JAVASCRIPT appsRegnare.com |
|
Es habitual validar los campos de los formularios para verificar que los datos sean correctos. En caso de no verificar la validación, se indicará que la información no es correcta para que la misma sea corregida.
Ejemplo de validación de Formulario Web
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi página</title>
<style>
.input_form {
box-sizing: border-box;
width: 100%;
max-width: 350px;
padding: 6px;
font-size: 16px;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 1px solid #607d8b;
border-radius: 2px;
}
.input_form:hover {
border: 1px solid #546c78;
}
.input_eval {
font-family: Arial;
height: 1.6em;
padding-right: 5px;
text-align: right;
font-size: 12px;
color: green;
}
</style>
<script>
function validar()
{
// NOMBRE -- si no hay texto ingresado o sólamente espacios en blanco -> incorrecto
if (document.getElementById("input_nombre").value.trim() == '')
{
document.getElementById("name_eval").innerText = "Ingresar nombre";
document.getElementById("input_nombre").focus();
return false;
}
// EMAIL -- verificamos que el campo no esté vacío y luego la sintaxis del email
var email = document.getElementById("input_email").value.trim();
if (email == '')
{
document.getElementById("email_eval").innerText = "Ingresar email";
document.getElementById("input_email").focus();
return false;
}
if (!email.match(
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
{
document.getElementById("email_eval").innerText = "Email inválido";
document.getElementById("input_email").focus();
return false;
}
// MENSAJE -- verificamos que el campo no esté vacío
if (document.getElementById("input_textarea").value.trim() == '')
{
document.getElementById("textarea_eval").innerText = "Ingresar texto";
document.getElementById("input_textarea").focus();
return false;
}
// todos los campos correctos:
alert("Formulario completado correctamente!")
}
function clear_eval(id)
{
document.getElementById(id).innerHTML="";
}
</script>
</head>
<body>
<h2 style="text-align: center; font-family: Helvetica;">Ejemplo de validación de formulario</h2>
<div align="center">
<div style="display: table-cell; width: 100%; min-width: 350px;">
<div style="margin-top: 15px; width: 350px;">
<div>
<input id="input_nombre" type="text" placeholder="Nombre*" value="" maxlength="100" class="input_form" onkeyup="clear_eval('name_eval')" />
</div>
<div class="input_eval" id="name_eval"></div>
<div>
<input id="input_email" type="text" placeholder="Email*" value="" maxlength="100" class="input_form" onkeyup="clear_eval('email_eval')" />
</div>
<div class="input_eval" id="email_eval"></div>
<div>
<textarea id="input_textarea" placeholder="Tu mensaje aquí..*" maxlength="255" class="input_form" rows="6" onkeyup="clear_eval('textarea_eval')"></textarea>
</div>
<div class="input_eval" id="textarea_eval"></div>
</div>
<div style="margin-top: 10px;">
<input type="button" value="Enviar" class="input_form" onclick="validar()" style="font-family: Helvetica, Arial, sans-serif; color: #123456; " />
</div>
<div style="margin-top: 15px; font-style: italic; text-align: left; padding-left: 15px;">
* Obligatorios
</div>
</div>
</div>
</body>
</html>
Veamos primeramente el Html. El input donde se ingresa el nombre tiene un atributo placeholder, el mismo sirve para ubicar texto a modo referencia. El atributo maxlength establece un límite para el número de caracteres a ingresar, en este caso el límite son 100 caracteres. En el atributo onkeyup hacemos llamada a la función clear_eval(id) al producirse el evento de soltar una tecla presionada dentro del input. Como parámetro le pasamos un string que es el valor del id del elemento al que queremos quitar el texto.
La verificación de los campos del formulario se realiza al presionar el botón "Enviar" mediante la llamada a la función validar(). En la misma se verifica campo por campo comenzando por el nombre. En el primer condicional, el lado izquierdo del operador de igualdad tiene el valor del elemento (el texto sin espacios en blanco al principio o al final, ya que se los quitamos con el método trim()), si este es igual a: "", un carácter vacío, se ejecutan las sentencias encerradas entre llaves: accedemos al elemento name_eval para que muestre el texto: "Ingresar nombre". La siguiente instrucción es poner el foco en el campo del nombre. return false termina la ejecución de la función.
Luego del nombre verificamos el campo del email. La primera verificación es similar a la del nombre. Si el texto (sin espacios en blanco) es un caracter vacío, mostramos el mensaje de error, ponemos el foco en el campo y terminamos la ejecución de la función. Si hay ingresado texto, verificamos mediante una expresión regular que el mismo coincida con la sintaxis de un email válido. Para esto usamos el método match() que compara un string con una expresión regular y devuelve null si no hay coincidencias. Con el operador lógico ! indicamos que el código entre llaves del condicional debe ejecutarse si el valor del condicional no es true, por lo tanto null, undefined o false.
Finalmente validamos el campo del textarea con la misma verificación que hicimos para el campo del nombre.
** Una línea de comentario en Javascript se inicia con //
Las líneas de comentario son ignoradas.
El ejemplo anterior se ve así:
| ← Anterior | Siguiente → |