Como validar formularios con javascript
Cómo empezar a validar un formulario en javascript
El formulario que vamos a validar contiene sólo dos campos obligatorios:
* E-mail
* ¿Qué utilidad ha encontrado a este artículo?
Ambos campos son necesarios para este ejemplo. El código HTML para crear el formulario es el siguiente:
<html> <head> <title>Pagina de ejemplo - validacion de formularios</title></head>
<body> <form action=”#”>
<ul> <li><label for=”email”>E-mail <img src=”req.gif” alt=”Required” /></label>
<input class=”reqemail” id=”email” value=”" /></li>
<li><label for=”question”>Que utilidad ha encontrado a este articulo?
<img src=”req.gif” alt=”Required” /></label><input class=”reqquestion” id=”question” value=”" /></li> </ul> <input type=”submit” value=”Submit form” />
</form>
</body>
</html>
Vamos a insertar el código HTML adicional como sigue:
<form onSubmit=”validateForms()” action=”#”>
Vamos a crear la función en JavaScript que valida el formulario y sus campos:
function validateForms()
{
}
La validateForms() es la función de raíz que se utiliza para controlar la forma en que el formulario sea validado. Vamos a empezar por conseguir una colección de objetos HTML de cualquier objeto en la página HTML:
function validateForms()
{
if (!document.getElementsByTagName) return false; elementsForms = document.getElementsByTagName(”form”); }
El siguiente paso en el proceso de validación consiste en recorrer los objetos y validarlos. Todos los formularios serán tratados de la misma manera. Lo haremos con un bucle for para recorrer la colección de objetos de HTML con cada formulario que se pasa a una nueva función llamada validateForms()
function validateForms()
{
if (!document.getElementsByTagName) return false; elementsForms = document.getElementsByTagName(”form”); for (var intCounter = 0; intCounter < elementsForms.length; intCounter++) { validateForm(elementsForms[intCounter]) } }
function validateForm(currentForm)
{
}
Para validar el correo electrónico vamos a crear una función simple utilizando una expresión regular para comprobar si el correo electrónico es válida. Esto es llamado cuando el class="reqemail" se encuentra por la función de validación:
function validateEmail(elementsInputs, intCounter)
{
var emailFilter=/^.+@.+\..{2,3}$/; if (!emailFilter.test(elementsInputs[intCounter].value)) { return true; } }
La función de completado debe tener este aspecto:
function validateForm(formActual)
{
var blnvalidate = true; var elementsInputs;
elementsInputs = formActual.getElementsByTagName(”input”); for (var intCounter = 0; intCounter < elementsInputs.length; intCounter++) { if (elementsInputs[intCounter].className == “reqquestion”) { if (validateText(elementsInputs, intCounter)) { blnvalidate = true; alert(’Debe completar el campo de opinión sobre el artículo’); } } else if (elementsInputs[intCounter].className == “reqemail”) { if (validateEmail(elementsInputs, intCounter)) { blnvalidate = true; alert(’Por favor ingrese un email válido’); } } } return blnvalidate; }
Etiquetas: expresiones regulares, filtros de email, formularios, Javascript, validación