Home » eliminar espacios en blanco » formulario » javascript » trim » validacion » validar » Validar formulario con Javascript

Validar formulario con Javascript

in , , , , , - on 1:47 p.m. - No comments
En este ejemplo de validación de un formulario utilizando Javascript primero creamos un formulario en HTML, con los campos Nombre, Apellido y Teléfono y Dos botones Validar y Limpiar. A cada uno de estos elementos HTML les asignamos un id para identificarlos en el código Javascript con sus respectivos nombres.

Ex:
<form>
<label>Nombre:</label>
<input type="text" id="nombre" name="nombre" size="20" autofocus="autofocus" /><br/>
<label>Apelido:</label>
<input type="text" id="apellido" name="apellido" /><br/>
<label>Telefono:</label>
<input type="text" id="telefono" name="telefono" /><br/>
<input type="button" value="Validar" id="boton_validar" />
<input type="reset" value="Limpiar" />
</form>

Luego debajo del formulario escribimos el codigo Javascript:

<script type="text/javascript">

function validar() {
    var nombre = document.getElementById("nombre");
    var apellido = document.getElementById("apellido");
    var telefono = document.getElementById("telefono");

    if (nombre.value.trim() == "") {
        nombre.focus();
        return alert("Algun elemento esta vacio");
    } else {
        if (apellido.value.trim() == "") {
            apellido.focus();
            return alert("Algun elemento esta vacio");
        } else {
            if (telefono.value.trim() == "") {
                telefono.focus();
                return alert("Algun elemento esta vacio");
            }
        }
    }

}

document.getElementById("boton_validar").onclick = validar;

 </script>

 Explicación del código:

Primero creamos la funcion validar, dentro de ella el codigo que esta devolvera.
Asignamos a variables javascript los inputs HTML Ej:  var nombre = document.getElementById("nombre");
Preguntamos si los valores de las variables javascript estan vacíos entonces enviamos el cursos al input correspondiente (nombre.focus();) y mandamos por pantalla un mensaje (return alert("Algun elemento esta vacio");)

Por ultimo decimos que el nombre del botón validar (en este caso "boton_validar", identificado por su id en HTML), en el evento "onclick" devuelva "validar" que es el nombre de la función.

Nota: La función Trim() se utiliza para eliminar espacios en blanco al inico y final de una cadena.

En definitiva el código completo es el sigte:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Validar formulario con Javascript</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>


<body bgcolor="#FFFFFF">

<hr />
<h2> VALIDACION DE FORMULARIO CON JAVASCRIPT </h2>
<hr />
&nbsp;

<form>
<label>Nombre:</label>
<input type="text" id="nombre" name="nombre" size="20" autofocus="autofocus" /><br/>
<label>Apelido:</label>
<input type="text" id="apellido" name="apellido" /><br/>
<label>Telefono:</label>
<input type="text" id="telefono" name="telefono" /><br/>
<input type="button" value="Validar" id="boton_validar" />
<input type="reset" value="Limpiar" />
</form>

<script type="text/javascript">

function validar() {
    var nombre = document.getElementById("nombre");
    var apellido = document.getElementById("apellido");
    var telefono = document.getElementById("telefono");

    if (nombre.value.trim() == "") {
        nombre.focus();
        return alert("Algun elemento esta vacio");
    } else {
        if (apellido.value.trim() == "") {
            apellido.focus();
            return alert("Algun elemento esta vacio");
        } else {
            if (telefono.value.trim() == "") {
                telefono.focus();
                return alert("Algun elemento esta vacio");
            }
        }
    }

}

document.getElementById("boton_validar").onclick = validar;


</script>


</body>
</html>






Etiquetas: , , , , ,

Publicar un comentario