Validación de un formulario con Javascript

  • Por
Cómo validar un formulario en una página web, en el lado del cliente con Javascript. Se comprueban todos sus campos y si son correctos, se envía el formulario.
Vamos realizar un ejemplo de un formulario completo para validar. Las validaciones se hacen en el propio navegador antes de enviarlo. Si hubo algún campo no relleno o con información errónea, el formulario muestra el campo que está incorrecto y solicita al usuario que lo cambie. Si todos los datos del formulario son correctos se envía el formulario.

Hemos querido hacer un formulario sencillo, para que el ejercicio no se haga demasiado complicado. No obstante, se realizan validaciones en campos con distintos valores, para hacerlo más variado. Se comprueba un campo donde debe figurar un texto, otro donde debe introducirse un número mayor que 18 y un último con un campo select donde deben haber seleccionado un valor.

Referencia: para comprender este ejercicio hace falta conocer el trabajo con formularios con Javascript. Podemos aprender también Javascript desde cero http://www.desarrolloweb.com/javascript/, si es que fuera necesario.

Se puede ver el ejemplo en funcionamiento para hacerse una idea más exacta del objetivo buscado.

El código del formulario

El formulario con el que vamos a trabajar es el siguiente:

<form name="fvalida">
<table>
<tr>
    <td>Nombre: </td>
    <td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
    <td>Edad: </td>
    <td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
    <td>Interés:</td>
    <td>
    <select name=interes>
    <option value="Elegir">Elegir
    <option value="Comercial">Contacto comercial
    <option value="Clientes">Atención al cliente
    <option value="Proveedores">Contacto de proveedores
    </select>
    </td>
</tr>
<tr>
    <td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>


Es un formulario cualquiera. Los únicos puntos donde debemos prestar atención son:
  • El nombre del formulario, "fvalida", que utilizaremos para referirnos al él mediante Javascript.
  • El botón de enviar, que en lugar de ser un submit corriente, es un botón que llama a una función, que se encarga de validar el formulario y enviarlo si todo fue correcto.
Función Javascript para validar el formulario

Ahora veremos la función que hemos creado para validar el formulario. Se llama valida_envia(). Simplemente, para cada campo del formulario, comprueba que el valor introducido es correcto. Si no es correcto, muestra un mensaje de alerta, pone el foco de la aplicación en el campo que ha dado el error y abandona la función retornando el valor 0.

Si todos los campos eran correctos, la función continúa hasta el final, sin salirse, por no estar ningún campo incorrecto. Entonces ejecuta la sentencia última, que es el envío del formulario.

Veamos la función entera, aunque luego la expliquemos por partes.

function valida_envia(){
    //valido el nombre
    if (document.fvalida.nombre.value.length==0){
       alert("Tiene que escribir su nombre")
       document.fvalida.nombre.focus()
       return 0;
    }

    //valido la edad. tiene que ser entero mayor que 18
    edad = document.fvalida.edad.value
    edad = validarEntero(edad)
    document.fvalida.edad.value=edad
    if (edad==""){
       alert("Tiene que introducir un número entero en su edad.")
       document.fvalida.edad.focus()
       return 0;
    }else{
       if (edad<18){
          alert("Debe ser mayor de 18 años.")
          document.fvalida.edad.focus()
          return 0;
       }
    }

    //valido el interés
    if (document.fvalida.interes.selectedIndex==0){
       alert("Debe seleccionar un motivo de su contacto.")
       document.fvalida.interes.focus()
       return 0;
    }

    //el formulario se envia
    alert("Muchas gracias por enviar el formulario");
    document.fvalida.submit();
}


En el primer bloque se valida el campo nombre. La validación que se hace es simplemente si se ha escrito algo en el campo. Para ello comprueba si el número de caracteres escritos en el campo nombre es cero. En ese caso, muestra el mensaje de alerta, sitúa el foco en el campo de texto y se sale de la función devolviendo el valor 0.

Nota: el foco de la aplicación es el lugar donde está situado el cursor. El foco puede estar en cualquier sitio. Por ejemplo en un campo de texto, en un select, en un enlace o en la propia página. Si presionamos una tecla del teclado afecta al lugar donde está situado el foco. Si, por ejemplo, el foco está en un campo de texto, al operar con el teclado estaremos escribiendo en ese campo de texto.

La validación de la edad mayor que 18 años tiene dos partes. Primero debemos comprobar que en el campo de texto hay escrito un valor entero. Luego, si teníamos un entero, habría que comprobar que es mayor que 18. Para hacer esta validación nos vamos a apoyar en una función que ya hemos visto en otro artículo de DesarrolloWeb.com, que habla sobre cómo validar un entero en un campo de formulario. Esa función devuelve un string vació en caso de que no sea un entero y el propio entero, si es que lo era.

Antes de realizar la validación de la edad propiamente dicha, se obtiene el valor introducido en el campo de formulario edad y se guarda en una variable llamada edad. Luego se ejecuta la función pasando esta edad. Su resultado lo utilizamos para volcarlo otra vez al campo de texto. Entonces, se comprueba si el valor devuelto por la función es un string vacío. En ese caso, es que el valor escrito en el formulario no era un entero, por lo que se muestra el mensaje de error, se sitúa el foco y se sale de la función.

En caso de que el campo edad contuviese un entero, se debe comprobar a continuación si es mayor que 18. En caso de que sea menor, se muestra el error y se sale. En caso contrario -entonces el valor sería mayor o igual que 18-, se continúa con las comprobaciones.

Por último se valida el campo select, donde aparece el interés del supuesto visitante, que le motiva para enviarnos el formulario. En ese campo se debe haber seleccionado cualquier opción menos la primera. Para asegurarnos, simplemente se comprueba si el atributo selectedIndex del campo select tiene el valor 0. Ese atributo almacena el índice seleccionado en el menú desplegable. El primer campo tiene el índice 0, el segundo el índice 1...

Si se comprueba que selectedIndex vale 0, se muestra un mensaje de alerta, se pone el foco en el campo del formulario y se sale de la función.

Si hemos llegado hasta este punto sin salirnos de la función es que todos los campos del formulario estaban rellenos correctamente. En ese caso se debe enviar el formulario. Antes de enviar el formulario se muestra un mensaje de alerta, agradeciendo que se haya rellenado correctamente. Este mensaje se puede suprimir si se desea.

Para enviar el formulario se hace una llamada al método submit() de dicho formulario.

Conclusión

Este ejercicio es de lo más básico y útil que se puede hacer en Javascript. Requiere ciertos conocimientos, ya ligeramente avanzados, pero en el fondo no resulta complicado. Incluso ampliarlo es bastante sencillo, siempre que sigamos un esquema similar para cada uno de los campos.

Podemos ver el resultado obtenido en una página aparte.

Autor

Miguel Angel Álvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Carlos

08/1/2005
Muy bueno tu articulo Miguel.
yo necesitaba algo muy parecido y me di cuenta de un pequeño detalle que pasa si lleno la caja de texto NOMBRE con puros espacios en blancos.
Veo que no has validado eso. Yo tambien tenia ese pequeño problemilla y lo soluciones agrgando un par de funciones que de hecho las encontre en internet.
function Trim( str ) {
var resultStr = "";
resultStr = TrimLeft(str);
resultStr = TrimRight(resultStr);
return resultStr;
}

function TrimLeft( str ) {
var resultStr = "";
var i = len = 0;
if (str+"" == "undefined" || str == null)
return "";
str += "";

if (str.length == 0)
resultStr = "";
else {
len = str.length;
while ((i <= len) && (str.charAt(i) == " "))
i++;
resultStr = str.substring(i, len);
}
return resultStr;
}

function TrimRight( str ) {
var resultStr = "";
var i = 0;
if (str+"" == "undefined" || str == null)
return "";
str += "";
if (str.length == 0)
resultStr = "";
else {
i = str.length - 1;
while ((i >= 0) && (str.charAt(i) == " "))
i--;
resultStr = str.substring(0, i + 1);
}

return resultStr;
}

----------------
Como ven la funcion TRim quita los espacios en blancos que existan a los costados de una cadena y para ello se vale de dos funciones TrimRight y TrimLeft que quitan espacios a la derecha e izquierda de la cadena respectivamente.

Luego puedes agragarle a tu funcion de validacion algo como lo siguiente:

function valida_envia(){
...
...
...
nom = document.Formulario.nombre.value;
if ( Trim(nom)=="" ){
alert ("Por favor ingrese su nombre correctamente");
return;
}

.....
.....
}

-----
Espero que les sea de ayuda.
Y espero sigas enviando articulos. Esto de compartir conocimientos es muy bueno.
Bueno adios y gracias fue de mucha tu articulo.

Andres

14/3/2005
Probé hacer un script muy similar al que muestran aquí, pero el problema es que luego de mostrar el error, el formulario se seguía enviando con los errores.

Para solucionarlo cambie los "return 0" por "return false" y luego llame a la función de la siguiente manera:

<form name="form1" action="contacto.php" method="post" onSubmit="javascript:return validar();">

Saludos

Gonzalo

31/1/2006
VALIDACION DE FECHA Y FORMATO

<SCRIPT LANGUAGE="JavaScript">
function Validar(Form)
{ var bisiesto_ini=0;var bisiesto_fin=0;var fecha=new Date();var anyo=0;
var diainicio=0;var mesinicio=0;var anyoinicio=0;var error=0;var campos=0
var diafin=0;var mesfin=0;var anyofin=0;var mayor=0;var mensaje='';
var barra1ini='';barra2ini='';var barra1fin='';barra2fin='';

barra1fin=Form.fechafin.value.substr(2,1);
barra2fin=Form.fechafin.value.substr(5,1);
barra1ini=Form.fechainicio.value.substr(2,1);
barra2ini=Form.fechainicio.value.substr(5,1);
diainicio=Form.fechainicio.value.substr(0,2);
mesinicio=Form.fechainicio.value.substr(3,2);
anyoinicio=Form.fechainicio.value.substr(6,4);
diafin=Form.fechafin.value.substr(0,2);
mesfin=Form.fechafin.value.substr(3,2);
anyofin=Form.fechafin.value.substr(6,4);

bisiesto_fin=anyofin%4;bisiesto_ini=anyoinicio%4;
anyo=fecha.getYear(); mes=fecha.getMonth()+1; dia=fecha.getDate();

/*control formato*/

if (Form.fechainicio.length<10 || barra1ini!='/' || barra1ini!='-')
{alert("RELLENE LA FECHA INICIO CON EL FORMATO ESPECIFICADO");
Form.fechainicio.focus();Form.fechainicio.value='';return false;}

if (Form.fechainicio.length<10 || barra1ini!='/' || barra1ini!='-')
{alert("RELLENE LA FECHA FIN CON EL FORMATO ESPECIFICADO");
Form.fechafin.focus();Form.fechafin.value='';return false;}
/*fin control formato*/

/*control si la fecha inicial es mayor a la inicial*/
if (anyofin<anyoinicio){mayor=1;}
if (mesfin<mesinicio && anyofin==anyoinicio){mayor=1;}
if (diafin<diainicio && mesfin==mesinicio && anyofin==anyoinicio){mayor=1;}
if (mayor==1)
{error=1;mensaje='LA FECHA INICIAL NO PUEDE SER MENOR QUE LA FINAL';}
/*Fin control si la fecha inicial es mayor a la inicial*/

/*control de meses que tienen 31 dias*/
if (diainicio==31 && (mesinicio==2 || mesinicio==4 || mesinicio==6 || mesinicio==9 || mesinicio==11) )
{error=1;campos=1;
mensaje='MES CON MENOS DE 31 DIAS EN FECHA INICIAL';}
/*fin control de meses que tienen 31 dias*/

/*año bisiesto*/
if((diainicio>28 && mesinicio==2 && bisiesto_ini!=0) || (diafin>28 && mesfin==2 && bisiesto_fin!=0))
{mensaje='FECHA NO BISIESTA';
if (mesinicio==2){campos=1;}
if (mesfin==2){campos=2;}
error=1;}
/*fin año bisiesto*/
/*control de meses que tienen 31 dias*/
if (diafin==31 && (mesfin==2 || mesfin==4 || mesfin==6 || mesfin==9 || mesfin==11) || (diafin>28 && bisiesto==0))
{error=1;campos=2;
mensaje='MES CON MENOS DE 31 DIAS EN FECHA FINAL';}
/*fin control de meses que tienen 31 dias*/

/*fecha mayor a la actual*/
if(anyoinicio>anyo || anyofin >anyo || diainicio >31 || diafin>31 || mesinicio>12 || mesinicio >12)
{error=1;mensaje='FECHA MAYOR A LA ACTUAL';campos=0;}
/*fin fecha mayor a la actual*/

/*muestra errores*/
if (error==1)
{ switch (campos){
case 0:
Form.fechainicio.focus();
Form.fechainicio.value='';
Form.fechafin.value='';
break;
case 1:
Form.fechainicio.focus();
Form.fechainicio.value='';
break;
case 2:
Form.fechafin.focus();
Form.fechafin.value='';
break;}
alert(mensaje);
return false;}
else {return true;}
}
</SCRIPT>

Esteban

07/3/2006
hola, esto es algo parecido, pero en vez de mostrar un pop up, avisa al lado que se debe completar el campo. Salu2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Validaciones</title>
</head>

<body>

<script language=javascript>



function validarFormulario(){

var isNotOk;

//validación nombre

var nombre = window.document.formValidar.nombre.value;
if (nombre==""){

document.getElementById("name").style.display="inline";
//window.document.formValidar.nombre.focus();
//return 0;
isNotOk=true;

}
else{

document.getElementById("name").style.display="none";

}

//validación apellido

var apellido = window.document.formValidar.apellido.value;
if (apellido==""){

document.getElementById("lastName").style.display="inline";
//window.document.formValidar.apellido.focus();
//return 0;
isNotOk=true;
}
else{

document.getElementById("lastName").style.display="none";
}

//validación calle

var calle = window.document.formValidar.calle.value;
if (calle==""){

document.getElementById("street").style.display="inline";
//window.document.formValidar.calle.focus();
//return 0;
isNotOk=true;
}
else{

document.getElementById("street").style.display="none";
}


//validación nro de calle
var numero;
numero= window.document.formValidar.numero.value;
if (isNaN(numero) || (numero=="")){

document.getElementById("number").style.display="inline";

//window.document.formValidar.numero.focus();
//return 0;
isNotOk=true;

}
else{

document.getElementById("number").style.display="none";
}


if (isNotOk){
return 0;


}
else{
window.document.formValidar.submit();
}



}
</script>

<form name="formValidar" >

<table>

<tr>
<td>Nombre:</td>
<td>
<input type=text name="nombre" maxlength=20></td>
<td>
<div id="name" style="display:none; color:red">&nbsp;Nombre inválido</div>
</td>
</tr>
<tr>
<td>Apellido:</td>
<td>
<input type=text name="apellido" maxlength=20></td>
<td>

<div id="lastName" style="display:none; color:red">&nbsp;Apellido inválido</div>

</td>

</tr>
<tr>
<td>Calle:</td>
<td>
<input type=text name="calle" maxlength=20></td>
<td>

<div id="street" style="display:none; color:red">&nbsp;Calle inválida</div>

</td>


</tr>

<tr>
<td>Número:</td>
<td>
<input type=text name="numero" maxlength=5 ></td>
<td>

<div id="number" style="display:none; color:red">&nbsp;Número inválido</div>

</td>



</tr>

<tr><td>
<input type=button value=Enviar onclick="validarFormulario()">
</tr></td>


</table>

</form>
</body>
</html>

jorge

26/4/2007
El script es muy util pero si tiene errores ya que despues de mandar el mensaje de error se envia la pagina a su destino, esto debido a que en el form action="" es la siguiente página donde ira esta información del formulario. seria interesante poner esta validacion precisamente con el action.

Saludos

26/12/2007
en la funcion para validar el nombre hace falta el paréntesis que contiene todo el codigo.

function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return 0;
}
} <---- si no la funcion no hara nada

seguramente muchos lo habran notado pero es importante hacerlo ver dado que mucha gente es principiante (yo mismo empece a programar gracias a este sitio)
Saludos :D

jairo

17/2/2009
como puedo validar un radio button ??

zulay

20/2/2009
hola yo necesito validar que solo admita 20 numeros pero no tengo ni idea como hacerlo. tengo esta funcion y me gustaria agregarle esa validacion.
function validar1(e){
tecla_codigo = (document.all) ? e.keyCode : e.which;
patron =/[0-9]/;
tecla_valor1 = String.fromCharCode(tecla_codigo);
return patron.test(tecla_valor1);
}
garcias

lady

20/3/2009
pero si estoy usando una base de datos como puedo hacer para que cuando la clave que envio no existe en ella me envie un error y retorne al formulario?

luz

29/5/2009
trabajo de javasript
hola, tengo un problema sabes que necesito un formulario en javascript validado, ya que de eso dependo pasar la materia gracias lo necesito urgente por favor

SrMurdoc4

27/6/2009
Una Observacion
Excelente tu posto sobre validacion de formualrios medio una gran idea de como validar con javascript, solamente un pequeño comentario.

cuando utilizas edad = validarEntero(edad)

Realmente no funcion a a menos que tambien hallas cargado el script que mencionas en tu documentacion.

sugiero hacer la validacion directamente en el script que escrbiste cambiando esa linea por:
edad = parseInt(edad)

Con eso ya se validaria en el mismo script que la edad sea un entero

felix

15/7/2009
espacios en blanco
Que tal,

Se debe considerar que el campo no quede con el espacio en blanco, si doy un espacio en blanco sin agregar nombre alguno, me acepta la validación del nombre, para ello es bueno usar expresiones regulares.

Saludos.

15/7/2009
Cambiar funcion
Hola. Estoy comenzando a comprender o tratando de hacerlo en realidad, la programacion de formularios con Javascript. Por ello pregunto ¿por cual funcion se cambiaria la funcion de validar la edad, que si bien tiene dos partes se podria reducir a una, por la funcion de validar email y como sería esta funcion? Muy agradecido desde ya.

BY MAFUEN

31/8/2009
el que no sabe se confunde, si son ejemplos hacerlos bien !
si quieres ayudar hazlo bien...!
te falta funcion validarEntero() en el ejemplo..
gracias

MAYUS

28/9/2009
crear pdf
hola....
estoy haciendo un formulario,,, necesito crear un pdf con numero cedula, nombre y un pin,,,,, como hago para realizar este pdf desde dreamwaver con los datos que se han insertado en el formulario....

Agradezco el que me pueda colaborarr...
gracias

cristobal

08/10/2009
que crack¡
el primer comentario de lo de trim el tio es un crack ¡ he estado buscando eso y ... aqui esta¡¡ muchisimas gracias¡¡

fedev79

21/10/2009
Tengo que Validar
hola Gente tengo este formulario:
<HTML>
<HEAD>
<TITLE>Formulario de Contacto</TITLE>
</HEAD>
<BODY bgcolor="white">
<h1 align="center">Preguntanos </h1>
<h2 align="center"> Tus consultas </h2>
<TABLE BORDER="1" align="center" bgcolor="#99ffff">
<form action="mailto:a@yo.com" method="post" enctype="text/plain">
<TR>
<td align="center">Apellido:</td>
<td><input type="text" name="txtape" size="30" maxlength="100"></td>
</TR>
<TR>
<td align="center">Nombre:</td>
<td><input type="text" name="txtnom" size="30" maxlength="100"></td>
</TR>
<TR>
<td align="center">Email:</td>
<td><input type="text" name="txtemail" size="25" maxlength="100"></td>
</TR>
<TR>
<td align="center">Telefono:</td>
<td><input type="text" name="txttel" size="20" maxlength="60"></td>
</TR>
<TR>
<td align="center">Fecha de Nacimiento:</td>
<td><input type="text" name="txtfecha" size="6" maxlength="6"></td>
</TR>
<TR>
<td align="center">Descripcion de tu consulta</td>
<td><textarea cols="30" rows="7" name="ttacomentarios">
</textarea><br><br>
<tr>
<td><input type="submit" value="Enviar formulario"></td>
<td><Input type="reset" value="Borrar todo"></td>
</tr>
</TR>
</form>
</TABLE>
</BODY>
</HTML>

y tengo que validar en JAVA el Apellido y Nombre en Mayuscula, el Telefono que sean solo numeros y no deje poner una letra, la fecha que deje poner solo 6 numeros y no mas y tambien valide y en el correo que pueda poner una arroba y un punto toy al horno mal.. alguien me podra dar una mano ?

Luís Eduardo Sánchez Vides

27/10/2009
Felicitaciones Por el aporte al conocimiento.
Felicitarlos es lo menos que se puede hacer, por personas o equipos de trabajo; que tiene el espíritu altruista, cuando se trata del conocimiento de un arte indispensable en la vida moderna; como es el de diseño y aplicaciones web.
Interesante la esplicación gracias.
Eduardo 57VC

manuelrojas

28/10/2009
validacion de formulario
esos codigos estan buenos pero como hago cuando tengo menus desplegables..?????

Eskombro

02/12/2009
Excelente
Me ha sido muy útil el artículo, muchas gracias!

Bernardo

02/12/2009
incompleto
Me disculpo, pero no veo en que lugar del codigo va a insertar el segundo codigo, a continuacion del primero o en una pagina aparte?, gracias, Bernardo

Carol

03/12/2009
Javascript con formularios pdf
Hola,
He creado una factura con acrobat profesional 9 y me ha quedado bastante bien, aunque mi problema es que lo la puedo acabar... los ´´unicos calculos que puedo hacer es sumar, multiplicar y hacer medias...
Me gustaria poder hacer un dto lineal y el calculo del iva... pero no se y no dejo de buscar informacion pero no doy con los codigos necesarios.
Estaria muy agradecida si alguien me ayudase a completar mi factura.
Saludos.
Carol

Jorge Remberto

17/12/2009
Escribir menos
JEJEJEJEE CrackerTreK haciendo de las suyas!!!

>>>>>>>>>>>>>>>>>>
var fecha1=document.getElementsByName("f_fin")[0].value;
fecha1=fecha1.split("-");
var ano=fecha1[0];
var mes=parseInt(fecha1[1])-1;
var dia=fecha1[2];
var dato=new Date(ano,mes,dia);

alert(dato);
if(dato.getMonth()!=mes)
{
alert("mal fecha");
}
else if(dato.getUTCDate()!=dia)
{
alert("mal fecha");
}
else{
alert("bien la fecha");
}

>>>>>>>>>>>>>>>>>>

UCI fac 8

Ana

07/2/2010
Duda
Hola! Tengo un problemita, y no sé si podrías solucionarmelo. Tengo el siguiente código, y quiero validar que el campo "intereses" seleccione alguna opción que no sea la primera, pero el código que aquí pones no debo de estar ubicándolo bien ya que no me sale el mensaje de alerta si no selecciono motivo.

Mi código que tengo con el resto de campos, etc es este:
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- El '+nm+' debe contener un e-mail válido. ';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- El '+nm+' debe contener un número. ';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- El '+nm+' debe contener un número entre '+min+' y '+max+'. ';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' Es obligatorio. '; }
} if (errors) alert('Se han encontrado los siguientes errores: '+errors);
document.MM_returnValue = (errors == '');
} }



Y debería añadirle

if (document.fvalida.interes.selectedIndex==0){
alert("Debe seleccionar un motivo de su contacto.")
document.fvalida.interes.focus()
return 0;
}

Pero no sé exactamente donde, porque si lo pongo debajo de mi código, no me sale el código de alerta. ¿Me explico?

Y gracias por tu aporte, es una currada de "tutorial".

marco antonio

10/2/2010
me podrias ayudar con este codigo
Hola buenas tardes mira e seguido los ejemplos que tienes aqui en la pagina pero todo sale muy bien al momento de validar el primer y segundo campo si me los valida pero ya el tercer campo como los demas restantes que estoy pidiendo no me los valida como le hago no se la casi de hecho nada de programacion y pues por nesesidad de publisidad en internet heme aqui y por ello solisito tu ayuda aqui te dejo el codigo de como le he hecho.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>WWW.ABATAR.COM.MX:::CONSULTA:::</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT>
function valida_envia(){
//valido el nombre
if (document.contacto.nombres.value.length==0){
alert("Tienes que ingresar tu nombres")
document.contacto.nombres.focus()
return 0;
}

if (document.contacto.apellidos.value.length==0){
alert("Tienes que ingresar tus apellidos")
document.contacto.nombres.focus()
return 0;
}

if (document.contacto.e-mail.value.length==0){
alert("Tienes que ingresar tu e-mail")
document.contacto.e-mail.focus()
return 0;
}

if (document.contacto.pais.value.length==0){
alert("Tiene que ingresar tu pais")
document.contacto.pais.focus()
return 0;
}

if (document.contacto.estado.value.length==0){
alert("Tiene que ingresar tu estado")
document.contacto.estado.focus()
return 0;
}

if (document.contacto.ciudad.value.length==0){
alert("Tiene que ingresar su ciudad")
document.contacto.ciudad.focus()
return 0;
}

if (document.contacto.consulta.value.length==0){
alert("Tiene que ingresar su consulta")
document.contacto.consulta.focus()
return 0;
}

//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();

}
</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18876"><style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #000000;
}
-->
</style></HEAD>
<BODY>
<form id="contacto" name="contacto" method="post" action="enviar2.php" onsubmit=="return validacion_envia()">
<TABLE align="center">
<TBODY>
<TR>
<TD>Nombres: </TD>
<TD><INPUT maxLength=100 size=30 name=nombres></TD></TR>
<TR>
<TD>Apellidos: </TD>
<TD><INPUT maxLength=100 size=30 name=apellidos></TD></TR>
<TR>
<TD>E-mail: </TD>
<TD><INPUT maxLength=100 size=30 name=e-mail></TD></TR>
<TR>
<TD>Pais: </TD>
<TD><INPUT maxLength=100 size=30 name=pais></TD></TR>
<TR>
<TD>Estado: </TD>
<TD><INPUT maxLength=100 size=30 name=estado></TD></TR>
<TR>
<TD>Ciudad: </TD>
<TD><INPUT maxLength=100 size=30 name=ciudad></TD></TR>
<TR>
<TD>Consulta: </TD>
<TD><textarea name="consulta" cols="35" rows="10"></textarea></TD>
</TR>
<TD colSpan=2 align=middle><div align="center">
<input name="Bot&oacute;n" type=button id="Enviar" onClick=valida_envia() value=Bot&oacute;n>
</div></TD></TR></TBODY></TABLE>
</FORM></BODY></HTML>

tambien cuando le cambio el nombre del buton que por original lo tiene como botón este funsiona bien validandome solo los dos primeros campos y cuando le cambio el nombre a enviar este ya no hace nada pero cuando lo checo su funsionalidad en el explorardo este me dise que listo pero con errores en la pagina
como le hago para solusionar estos errores, aparte tengo el codigo de un sistema de captcha como le hago para incrustarle el captcha a este formulario por que anteriormente.Grasias te lo sgradeseria muy eternamente.

Leopoldo Olivera

10/2/2010
Casi perfecto.
El script esta muy muy bueno, me ha servido un montón en realidad lo use para validar una fecha y que no sea superior a la actual, le note un solo error, en los años biciestos el control permite poner 29 de febrero que esta muy bien, pero tambien permite ingresar 30 de febrero lo que no estaría bien, agregue una linea más y lo solucioné, muchas gracias por la publicación.

barbasurf

20/2/2010
HOLA
OIE PERO CUENTAME COMO HAGO PARA QUE LLEGE A MI MAIL LOS MENSAJES CON ESTE JAVA SCRIP

POZAS

26/2/2010
VALIDAR UNA CUENTA BANCARIA JAVA
public static Boolean validarCuentaBancaria(String cuenta)
{
Pattern cuentaPattern = Pattern.compile("\d{20}");
Matcher m = cuentaPattern.matcher(cuenta);
if (m.matches())
{
// cuenta cumple el patrón (20 dígitos)
String banco = cuenta.substring(0, 4);
String sucursal = cuenta.substring(4,8);
String dC = cuenta.substring(8, 10);
String CCC = cuenta.substring(10, 20);
if (!( obtenerDigito("00" + banco + sucursal ) == Integer.parseInt(String.valueOf(dC.charAt(0))))
||!(obtenerDigito(CCC) == Integer.parseInt(String.valueOf(dC.charAt(1)))))
return false;
else
return true;
}
return false;

}


public static int obtenerDigito(String valor)
{
Integer[] valores = new Integer[]{1, 2, 4, 8, 5, 10, 9, 7, 3, 6};

Integer control = 0;
for (int i=0; i <=9; i++)
control += Integer.parseInt(String.valueOf(valor.charAt(i))) * valores[i];
control = 11 - (control % 11);
if (control == 11)
control = 0;
else if (control == 10)
control = 1;
return control;
}

ismal wilson lopez cardona

11/3/2010
corrección a l código
falto la función validar entero es así:

el código original.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script language="javascript">
function validarEntero(valor){
//intento convertir a entero.
//si era un entero no le afecta, si no lo era lo intenta convertir
valor = parseInt(valor)

//Compruebo si es un valor numérico
if (isNaN(valor)) {
//entonces (no es numero) devuelvo el valor cadena vacia
return ""
}else{
//En caso contrario (Si era un número) devuelvo el valor
return valor
}
}

function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return 0;
}

//valido la edad. tiene que ser entero mayor que 18
edad = document.fvalida.edad.value
edad = validarEntero(edad)
document.fvalida.edad.value=edad
if (edad==""){
alert("Tiene que introducir un número entero en su edad.")
document.fvalida.edad.focus()
return 0;
}else{
if (edad<18){
alert("Debe ser mayor de 18 años.")
document.fvalida.edad.focus()
return 0;
}
}

//valido el interés
if (document.fvalida.interes.selectedIndex==0){
alert("Debe seleccionar un motivo de su contacto.")
document.fvalida.interes.focus()
return 0;
}

//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
</script>

<body>
<form name="fvalida">
<table>
<tr>
<td>Nombre: </td>
<td><input type="text" name="nombre" size="30" maxlength="100"></td>
</tr>
<tr>
<td>Edad: </td>
<td><input type="text" name="edad" size="3" maxlength="2"></td>
</tr>
<tr>
<td>Interés:</td>
<td>
<select name=interes>
<option value="Elegir">Elegir
<option value="Comercial">Contacto comercial
<option value="Clientes">Atención al cliente
<option value="Proveedores">Contacto de proveedores
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</tr>
</table>
</form>
</body>
</html>

jany

23/3/2010
gracias
hola!!!
me gusta todo lo que se explica
por que si le entiendo bien y asi me gusta que expliquen paso por paso para poder analizar todo
bueno pues gracias por su informacion me sirvio de mucho

TAVO

07/5/2010
El on click en javascript no funciona
Hola como stan pido ayuda asu sabio conocimiento chicos:
se q ustedes son los elegidos del javascripts y pido su ayuda a este umilde mortal con problemas.

gracias a todos ustedes.

tengo este inconveniente:
sucede q tengo 3 paguinas: A,B,C
A=paguina principal
B y C=paguinas segundarias

Tengo un div en A, donde este div carga la paguina B atravez de un link en A,
y cuando quiero carga la paguina C en el mismo div de A con un boton de B, el evento onclick no realiza la funcion.

Mi objetivo en esto es validar algunos controles como cajas de texto,radios y select
antes de pasar ala paguina C

////////utilise ajax para cargar en el div la paguina B,cargare la paguina C con ajax pero antes tengo q validar controles de B.

He notado q los codigos de javascripts no funcionan en la paguina B q si quiero q funcione tengo q colocarlo en A. Pero en este caso no funciona la funcion para validar con onclick(valida_envia)

Otro detalle porque sucede esto q funcione javascript en una paguina y en otra no,es acaso por ser contenedora A y B es una hija de A. ¿Lo dije bien?
¿me pueden explicar?

////////////
este es el codigo q utilizo en onclick en la paguian A,he probado el mismo codigo en A y B y no funciona ,¿q estoy haciendo mal?:

<script type="text/javascript">
function valida_envia(txtemail){
//valido el email
var obj=document.getElementById(txtemail);
if (obj.value.length==0){
alert("Tiene que escribir su email")
obj.value="xxx";
obj.focus()
return 0;
}
</script>

/////////////////////////GRACIAS//////////////////////////////////

Cristian

11/5/2010
Excelente
Por amor de Dios muchas gracias ya pude validar mi formulario, que buen aporte espero algun dia ayudar tanto como lo han hecho ustedes

german

21/5/2010
No sirve
Ese metodo no sirve, si muestra el mensaje pero igual deja oasar

Alicia

11/6/2010
Validacion
Felicidades!<br />
Es un codigo muy entendible y muy funcional, yo estaba buscando algo similar y la verdad este es el mas facil de adaptar y de entender, salvo por algunos pequenios errores de sintaxis pero esta fabuloso, me funciono de maravilla.

Sebastian

20/6/2010
Problemas con Codigo Validar
Lo siento amigo pero su codigo no funciona, tiene errores grabes, ademas del hecho de que no valida todos los campos con suerte valida el nombre, quisas y supongo que colocaste el codigo con errores para que no fuera tan facil como copiar y pegar, pero se supone que estas ofreciendo ayuda a los demas y eso no se hace, en el caso que no tu codigo tiene errores te recomiendo que lo estudies y los repares..<br />
<br />
Gracias por tu Tiempo....<br />
<br />
atte.. Sebastian Basulto

paul ulloa

03/7/2010
Necesito ayuda en un formulario
tengo q crear un script para que ningun text box este vacio al enviar el formulario, digitar un zip code y un email valido, estos son los campos



Full Name:

Street Address:

City:
State:
Zip Code:

Email:

muchas gracias por su ayuda

gitanitah

18/7/2010
validacion
Bueno a ver si algien me puede ayudar la cosa es esto .....yo tengo un formulario que valida si en los numeros ingresa numeros y que en el nombre solo ingresen letras ahora en lo qeu se me complica es esto que por ej en un campo especifico por decir un ejemplo apellido ingrese solamente un apellido "perez" por ejemplo y si no es asi que no ingrese ...aca abajo pongo el codigo por favor si algien me puede ayudar me vendria barbaro!
<!-- saved from url=(0096)file:///C:/Documents%20and%20Settings/usuario/Mis%20documentos/Downloads/TrabajoFinal%20(2).html -->
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE> Gimnasio amici </TITLE>
<SCRIPT>
var Nombre= new Array()
var Apellido= new Array()
var Telefono= new Array()
var Nrodedoc= new Array()
var Sexo= new Array()
var Actividad= new Array()
var Nrodeafiliado= new Array()
var i=0
var j=0
function funcargar(nom,ape,tel,doc,sex,act,num)
{
Nombre[i]=nom
Apellido[i]=ape
Telefono[i]=tel
Nrodedoc[i]=doc
Sexo[i]=sex
Actividad[i]=act
Nrodeafiliado[i]=num
++i
document.frmformulario.txtNombre.value=""
document.frmformulario.txtApellido.value=""
document.frmformulario.txtTelefono.value=""
document.frmformulario.txtNrodedoc.value=""
document.frmformulario.txtSexo.value=""
document.frmformulario.txtActividad.value=""
document.frmformulario.txtNrodeafiliado.value=""
document.frmformulario.cmdmostrar.enabled=false
document.frmformulario.txtNombre.focus()
}
function funmostrar()
{
document.write("")
document.write("<table width=80% cellspaddig=2 align=center>")
document.write("<tr>")
document.write("<td colspan=5 align=center>"+"<b>"+"<h2>Gimnasio Amici"+"</h2>"+"</b>"+"</td>")
document.write("</tr>")
document.write("<tr align=left>")
document.write("<td>Nombre"+"</td>"+"<td>Apellido"+"</td>"+"<td>Telefono"+"</td>"+"<td>Nro de documento"+"</td>"+"<td>Sexo"+"</td>"+"<td>Actividad"+"</td>"+"<td>Nro de afiliado"+"</td>")
document.write("</tr>")
for(j=0;j<=(i-1);j++)
{
document.write("<tr>")
document.write("<td>"+Nombre[j]+"</td>"+"<td>"+Apellido[j]+"</td>"+"<td>"+Telefono[j]+"</td>"+"<td>"+Nrodedoc[j]+"</td>"+"<td>"+Sexo[j]+"</td>"+"<td>"+Actividad[j]+"</td>"+"<td>"+Nrodeafiliado[j]+"</td>")
document.write("</tr>")
}
document.write("</table>")
document.bgColor="#339999"
}
function validarSiNumero(numero)
{
if (!/^([0-9])*$/.test(numero))
alert("El valor " + numero + " no es un número");
}
function validar()
{
if(/[^aA-zZ]/.test(document.formulario.campo.value)) return false;
return true;
}
</SCRIPT>
</HEAD><BODY bgcolor="#006666">
<FORM name="frmformulario">
<TABLE name="ingresadatos" align="center">
<TBODY><TR>
<TD colspan="2"> <B></B><H2><B> Gimnasio Amici </B></H2></TD>
</TR><TR>
<TD>Nombre:</TD>
<TD><INPUT type="text" name="txtNombre" value="" size="15" maxlength="16" onkeyup="this.value = this.value.replace (/[^aA-zZ]/, &#39;&#39;);">
</TD></TR>
<TR>
<TR>
<TD>Apellido:</TD>
<TD><INPUT type="text" name="txtApellido" value="" size="12" maxlength="15" onkeyup="this.value = this.value.replace (/[^aA-zZ]/, &#39;&#39;);">
</TD></TR>
<TR>
<TD>Telefono:</TD>
<TD><INPUT type="text" name="txtTelefono" value="" size="10" maxlenght="12" onchange="validarSiNumero(this.value);"></TD>
</TR>
<TR>
<TD>Numero de doc:</TD>
<TD><INPUT type="text" name="txtNrodedoc" value="" size="9" maxlenght="8" onchange="validarSiNumero(this.value);"></TD>
</TR>
<TR>
<TD>Sexo:</TD>
<TD><SELECT name="txtSexo">
<OPTION value="Masculino">Masculino
</OPTION><OPTION value="Femenino">Femenino
</OPTION></SELECT></TD>
</TR><TR>
<TD>Actividad:</TD>
<TD><SELECT name="txtActividad">
<OPTION value="Maquinas">Maquinas
</OPTION><OPTION value="Yoga">Yoga
</OPTION><OPTION value="Pilates">Pilates
</OPTION><OPTION value="Todas">Todas
</OPTION></SELECT></TD>
</TR>
<TR>
</TR><TR>
<TR>
<TD>Nro de afiliado</TD>
<TD><INPUT type="text" name="txtNrodeafiliado" value="" size="4" onchange="validarSiNumero(this.value);"></TD>
</TR>
<TR>
<TR>
<TR>
<TR>
<TD><INPUT type="button" name="cmdcargar" value="Cargar" onclick="funcargar(document.frmformulario.txtNombre.value, document.frmformulario.txtApellido.value, document.frmformulario.txtTelefono.value, document.frmformulario.txtNrodedoc.value, document.frmformulario.txtSexo.value, document.frmformulario.txtActividad.value, document.frmformulario.txtNrodeafiliado.value)">
<INPUT type="button" name="cmdmostrar" value="Mostrar" onclick="funmostrar()">
</TD>
</TR>
</TBODY></TABLE>
</FORM>

</BODY></HTML>

dexter_one

28/7/2010
Gracias
Muchas gracias por tu aporte, mesacaste de un apuro.

Saludos!

Marta

16/8/2010
además, validar el e-mail
Hola Miguel Angel
soy novata en esto... trabajé en base a tu formulario pero necesito agregar la validación del e-mail, así que lo modifiqué de esta manera:

<script>
function valida_envia(){
//valido el nombre
if (document.fvalida.nombre.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nombre.focus()
return false;
}

//valido el mail
if (/^[0-9a-zA-Z]+(?:[._][0-9a-zA-Z]+)*@[0-9a-zA-Z]+(?:[._-][0-9a-zA-Z]+)*.[0-9a-zA-Z]{2,4}$/.test(document.fvalida.email.value)){
alert("Tiene que escribir un e-mail válido")
document.fvalida.email.focus()
return false;
}

//valido el telefono
if (document.fvalida.telefono.value.length==0){
alert("Tiene que escribir su telefono.")
document.fvalida.telefono.focus()
return false;
}

//valido el celular
if (document.fvalida.celular.value.length==0){
alert("Tiene que escribir su celular.")
document.fvalida.celular.focus()
return false;
}

//valido el mensaje
if (document.fvalida.mensaje.value.length==0){
alert("Tiene que escribir su mensaje.")
document.fvalida.mensaje.focus()
return false;
}

//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();
}
</script>

pero no valida el e-mail, puedo poner cualquier palabra y el formulario se envía igual... podrías ayudarme a resolverlo?

gracias

carla_bravo

30/8/2010
errores, por favor fijaros!! ;s gracias
soy principiante en javascript, la verdad es que siempre confío en este sitio para resolver mis dudas, es excelente y he logrado aprender sobre web, pero ahora, por falta de tiempo, no he podido leer los manuales de javascript. He consultado este post y crei que para hacer funcionar el formulario podia cortar y pegar el codigo que ofreceis, en una pagina html, pero no puedo hacer funcionar el formulario, lei que tiene errores, por lo que PEDIRIA por favor, a ser posible, os fijeis un poquito mas en escribir el código. Gracias

jajaja

30/9/2010
risa
jajaja, que cara palo este otro en pedir que le hagan el trabajo sin tomarse la molestia de pensar un poco para hacerlo él mismo xD. los errores a los que se refieren no te impiden hacer funcionar el form. los "copy paste" rara vez reailizan lo que queremos, así que modificalo a tu necesidad, nos eas tan flojo

carlos

22/2/2011
Es fenomeno
Te agrdezco un resto! por este magnifico tuto, me ayudó demasiado.<br />
<br />
Gracias

Beto

05/3/2011
Duda
No se como guardar los datos recopilados en un formulario html en una tabla

pedro_arnedo

21/4/2011
No me funciona la validacion javascript por ningun lado
Amigo necesito su ayuda... tengo un archivo php asi:




<html>
<script language="javascript" type="text/javascript" src="validar.js"></script>
<form name="f" method="post" enctype="text/plain" action="contactoform.php" onSubmit="return Validar(this);">
<label for="X"> </label>
<br><br>
<label for="nombre">Nombre Completo: </label> <br> <input name="nombre" size="50" maxlength="80" type="text"><br>
<label for="email">Email (Dato Necesario para Responderle): </label> <br> <input name="email" size="50" maxlength="60" type="text"><br>
<label for="asunto">Tema Solicitud: </label> <br> <input name="asunto" size="50" maxlength="60" type="text"><br>
<label for="mensaje">Descripcion: </label> <br> <textarea name="mensaje" cols="31" rows="5"></textarea> <br>
<label for="enviar">
<input name="enviar" value="Enviar" type="submit"></label>
<br><br>
</form>
</html>


<?php

///////Configuraci?///
$mail_destinatario = 'informaticax.com.co@gmail.com';
///////Fin configuraci?

if (isset ($_POST['enviar'])) {
$headers .= "From: ".$_POST['email']. "";
if ( mail ($mail_destinatario, $_POST['asunto'], "NOMBRE COMPLETO: ".$_POST['nombre']." ASUNTO: ".stripcslashes ($_POST['asunto'])." MENSAJE : ".stripcslashes ($_POST['mensaje']), $headers )) echo '*** Su mensaje a sido enviado correctamente. Gracias por contactar con nosotros. *** ';
else
echo '*** Error al enviar el formulario. Por favor, intentelo de nuevo mas tarde. ***'; }

?>



y tengo el validar.js asi:

// JavaScript Document
//Funci?ue verifica campos del formulario vac?
function Validar(f) {
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
var mensaje = document.getElementById("mensaje").value;

if (nombre=="") { alert("Por favor escriba su Nombre completo");
f.nombre.focus();
return false;
}

if (f.email.value=="")
{ alert("Por favor escriba su direccixF3n de correo electrxF3nico");
f.email.focus();
return false; }

if (f.mensaje.value=="")
{ alert("Por favor escriba su Mensaje.");
f.mensaje.focus();
return false; }
}

y no me funciona, dejo los campos en blanco del formulario y manda el email vacio, sin validar nada...


Gracias por su ayuda......

pedro_arnedo

21/4/2011
No me funciona la validacion javascript por ningun lado
Amigo necesito su ayuda... tengo un archivo php asi:




<html>
<script language="javascript" type="text/javascript" src="validar.js"></script>
<form name="f" method="post" enctype="text/plain" action="contactoform.php" onSubmit="return Validar(this);">
<label for="X"> </label>
<br><br>
<label for="nombre">Nombre Completo: </label> <br> <input name="nombre" size="50" maxlength="80" type="text"><br>
<label for="email">Email (Dato Necesario para Responderle): </label> <br> <input name="email" size="50" maxlength="60" type="text"><br>
<label for="asunto">Tema Solicitud: </label> <br> <input name="asunto" size="50" maxlength="60" type="text"><br>
<label for="mensaje">Descripcion: </label> <br> <textarea name="mensaje" cols="31" rows="5"></textarea> <br>
<label for="enviar">
<input name="enviar" value="Enviar" type="submit"></label>
<br><br>
</form>
</html>


<?php

///////Configuraci?///
$mail_destinatario = 'informaticax.com.co@gmail.com';
///////Fin configuraci?

if (isset ($_POST['enviar'])) {
$headers .= "From: ".$_POST['email']. "";
if ( mail ($mail_destinatario, $_POST['asunto'], "NOMBRE COMPLETO: ".$_POST['nombre']." ASUNTO: ".stripcslashes ($_POST['asunto'])." MENSAJE : ".stripcslashes ($_POST['mensaje']), $headers )) echo '*** Su mensaje a sido enviado correctamente. Gracias por contactar con nosotros. *** ';
else
echo '*** Error al enviar el formulario. Por favor, intentelo de nuevo mas tarde. ***'; }

?>



y tengo el validar.js asi:

// JavaScript Document
//Funci?ue verifica campos del formulario vac?
function Validar(f) {
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
var mensaje = document.getElementById("mensaje").value;

if (nombre=="") { alert("Por favor escriba su Nombre completo");
f.nombre.focus();
return false;
}

if (f.email.value=="")
{ alert("Por favor escriba su direccixF3n de correo electrxF3nico");
f.email.focus();
return false; }

if (f.mensaje.value=="")
{ alert("Por favor escriba su Mensaje.");
f.mensaje.focus();
return false; }
}

y no me funciona, dejo los campos en blanco del formulario y manda el email vacio, sin validar nada...


Gracias por su ayuda......

pedro_arnedo

21/4/2011
No me funciona la validacion javascript por ningun lado
Amigos tengo este formulario:




<html>
<script language="javascript" type="text/javascript" src="validar.js"></script>
<form name="f" method="post" enctype="text/plain" action="contactoform.php" onSubmit="return Validar(this);">
<label for="X"> </label>
<br><br>
<label for="nombre">Nombre Completo: </label> <br> <input name="nombre" size="50" maxlength="80" type="text"><br>
<label for="email">Email (Dato Necesario para Responderle): </label> <br> <input name="email" size="50" maxlength="60" type="text"><br>
<label for="asunto">Tema Solicitud: </label> <br> <input name="asunto" size="50" maxlength="60" type="text"><br>
<label for="mensaje">Descripcion: </label> <br> <textarea name="mensaje" cols="31" rows="5"></textarea> <br>
<label for="enviar">
<input name="enviar" value="Enviar" type="submit"></label>
<br><br>
</form>
</html>


<?php

///////Configuración/////
$mail_destinatario = 'informaticax.com.co@gmail.com';
///////Fin configuración//

if (isset ($_POST['enviar'])) {
$headers .= "From: ".$_POST['email']. "";
if ( mail ($mail_destinatario, $_POST['asunto'], "NOMBRE COMPLETO: ".$_POST['nombre']." ASUNTO: ".stripcslashes ($_POST['asunto'])." MENSAJE : ".stripcslashes ($_POST['mensaje']), $headers )) echo '*** Su mensaje a sido enviado correctamente. Gracias por contactar con nosotros. *** ';
else
echo '*** Error al enviar el formulario. Por favor, intentelo de nuevo mas tarde. ***'; }

?>



y esta es la funcion javascript


// JavaScript Document
//Función que verifica campos del formulario vacíos
function Validar(f) {
var nombre = document.getElementById("nombre").value;
var email = document.getElementById("email").value;
var mensaje = document.getElementById("mensaje").value;

if (nombre=="") { alert("Por favor escriba su Nombre completo");
f.nombre.focus();
return false;
}

if (f.email.value=="")
{ alert("Por favor escriba su direccixF3n de correo electrxF3nico");
f.email.focus();
return false; }

if (f.mensaje.value=="")
{ alert("Por favor escriba su Mensaje.");
f.mensaje.focus();
return false; }
}

y nada me funciona, dejo los campos en blanco y se evia... que puede ser?



Gracias...

MIGUEL TORRES (VZLA)

16/5/2011
POSIBLE CORRECION AL ERROR
CORREGIDO PARA QUE NO ENVIE SIN VALIDAR DEBERIA SER ASI...<br />
<br />
&lt;html&gt; <br />
&lt;head&gt; <br />
&lt;title&gt;Documento sin t&amp;iacute;tulo&lt;/title&gt; <br />
&lt;/head&gt;<br />
&lt;script language=&quot;javascript&quot;&gt;<br />
function validarEntero(valor){ <br />
//intento convertir a entero. <br />
//si era un entero no le afecta, si no lo era lo intenta convertir <br />
valor = parseInt(valor) <br />
//Compruebo si es un valor numérico <br />
if (isNaN(valor)) { <br />
//entonces (no es numero) devuelvo el valor cadena vacia <br />
return &quot;&quot; <br />
}else{ <br />
//En caso contrario (Si era un número) devuelvo el valor <br />
return valor <br />
} <br />
}<br />
function valida_envia(){ <br />
valido=1<br />
//valido el nombre <br />
if (document.fvalida.nombre.value.length==0){ <br />
alert(&quot;Tiene que escribir su nombre&quot;) <br />
document.fvalida.nombre.focus() <br />
valido=0<br />
return 0; <br />
} <br />
//valido la edad. tiene que ser entero mayor que 18 <br />
edad = document.fvalida.edad.value <br />
edad = validarEntero(edad)<br />
document.fvalida.edad.value=edad <br />
if (edad==&quot;&quot;){ <br />
alert(&quot;Tiene que introducir un número entero en su edad.&quot;) <br />
document.fvalida.edad.focus() <br />
valido=0<br />
return 0; <br />
}else{ <br />
if (edad&lt;18){ <br />
alert(&quot;Debe ser mayor de 18 años.&quot;) <br />
document.fvalida.edad.focus() <br />
valido=0<br />
return 0; <br />
} <br />
} <br />
//valido el interés <br />
if (document.fvalida.interes.selectedIndex==0){ <br />
alert(&quot;Debe seleccionar un motivo de su contacto.&quot;) <br />
document.fvalida.interes.focus() <br />
valido=0<br />
return 0; <br />
} <br />
//el formulario se envia *** SI ES VALIDO ***<br />
if (valido=1){<br />
alert(&quot;Muchas gracias por enviar el formulario&quot;) <br />
document.fvalida.submit(); <br />
}<br />
}<br />
&lt;/script&gt;<br />
&lt;body&gt; <br />
&lt;form name=&quot;fvalida&quot;&gt; <br />
&lt;table&gt; <br />
&lt;tr&gt; <br />
&lt;td&gt;Nombre: &lt;/td&gt; <br />
&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;nombre&quot; size=&quot;30&quot; maxlength=&quot;100&quot;&gt;&lt;/td&gt; <br />
&lt;/tr&gt; <br />
&lt;tr&gt; <br />
&lt;td&gt;Edad: &lt;/td&gt; <br />
&lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;edad&quot; size=&quot;3&quot; maxlength=&quot;2&quot;&gt;&lt;/td&gt; <br />
&lt;/tr&gt; <br />
&lt;tr&gt; <br />
&lt;td&gt;Interés:&lt;/td&gt; <br />
&lt;td&gt; <br />
&lt;select name=interes&gt; <br />
&lt;option value=&quot;Elegir&quot;&gt;Elegir <br />
&lt;option value=&quot;Comercial&quot;&gt;Contacto comercial <br />
&lt;option value=&quot;Clientes&quot;&gt;Atención al cliente <br />
&lt;option value=&quot;Proveedores&quot;&gt;Contacto de proveedores <br />
&lt;/select&gt; <br />
&lt;/td&gt; <br />
&lt;/tr&gt; <br />
&lt;tr&gt; <br />
&lt;td colspan=&quot;2&quot; align=&quot;center&quot;&gt;&lt;input type=&quot;button&quot; value=&quot;Enviar&quot; onclick=&quot;valida_envia()&quot;&gt;&lt;/td&gt; <br />
&lt;/tr&gt; <br />
&lt;/table&gt; <br />
&lt;/form&gt; <br />
&lt;/body&gt; <br />
&lt;/html&gt;

MIGUEL TORRES (VZLA)

16/5/2011
OJO NO ES 1 (=) SON 2 (=) SE ME PASO
//el formulario se envia <br />
if (valido==1){<br />
alert(&quot;Muchas gracias por enviar el formulario&quot;) <br />
document.fvalida.submit(); <br />
}

isa

14/6/2011
Un problemilla con dos botones
Hola!

El ejemplo está genial y es muy útil. Además, gracias a los comentarios he podido ver porqué en mi caso no se paraba...pero ahora tengo otro problemilla...

Tengo dentro del formulario dos botones a los que he de hacerles comprobaciones diferentes, pero claro, si lo hago en el onSubmit me comprueba siempre las dos cosas.

Hay alguna forma de diferenciar en el script que botón se ha pulsado?

Raymundo Ceja

14/7/2011
Agradecimiento
Excelente aportación, funciona a la perfección.

ivan novato

04/8/2011
necesito ayuda porfavorr...!!! ayudenme a validar esto por que no puedo..(x_x)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<?
include('conecta.php');
?>
<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>

<title>Reinscripccion</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>
<body>

<div id="wrap">
<div id="main">

<img src="imagenes/inscripciones.png" align="center">



<form action="registrar.php" name="cmaForm" id="cmaForm" method="post" enctype="multipart/form-data">


<input type="hidden" name="recordRequestPrimaryServiceID" id="recordRequestPrimaryServiceID" value="100" />
<input type="hidden" name="recordClientServices" id="recordClientServices" value="1,3" />

<input type="hidden" name="No_op" id="recordClientServices" value="1" />


<ul id="stepForm" class="ui-accordion-container">
<li id="sf1"><a href='#' class="ui-accordion-link"> </a>
<div>
<fieldset><legend>Inscripción a Talleres...</legend>
<p> <img src="imagenes/extra2.jpg" align="right">
<font face="comics" size=4 color=blue><center>Introduce tus Datos en el Formulario</center></font></p>

<div class="formspacer"></div>
<label for="vNocontrol" class="input required">Numero de control:</label> <input name="vNocontrol" id="vNocontrol" class="inputclass pageRequired" title="Requiere numero de Control" /> <br>
<label for="vCarrera" class="input required">Carrera</label>

<select name="vCarrera" id="select" class="inputclass pageRequired" title="Requiere una carrera">
<option value="">-Selecciona la Carrera-</option>

<?
$res = mysql_query("Select * From carreras Order By No_carrera") or die ("Error al realizar la consulta en la carrera");
$i=0;
while($arreglo = mysql_fetch_array($res))
{
$query[0] = $arreglo[No_Carrera];
$query[1] = $arreglo[Nombre];
?>
<option value="<?echo $query[0]?>"> <?echo $query[1]?> </option>

<?
$i=$i+1;

}

?>
</select>
<br>
<label for="vNombre" class="input required">Nombre</label> <input name="vNombre" id="vNombre" class="inputclass pageRequired" title="Introduce tu Nombre" maxlength="20" onblur="vNombre.value = this.value" /><br />

<label for="vApellidop" class="input required">Apellido Paterno</label> <input name="vApellidop" id="vApellidop" class="inputclass pageRequired" title="Introduce tu Apellido Paterno" maxlength="20" onblur="vApellidop.value = this.value" /><br />

<label for="vApellidom" class="input required">Apellido Materno</label> <input name="vApellidom" id="vApellidom" class="inputclass pageRequired" title="Introduce tu Apellido Materno" maxlength="20" onblur="vApellidom.value = this.value" /><br />

<label for="vEdad" class="input required">Edad</label> <input name="vEdad" id="vEdad" class="inputclass pageRequired" title="Introduce tu Edad" maxlength="2" onblur="vEdad.value = this.value" /><br />

<label for="vGenero" class="input required">Genero</label> <select name="vGenero" id="select" class="inputclass pageRequired" title="Selecciona un Genero">
<option value="">-Selecciona Genero-</option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
</select>
<br />

<label for="vGruposa" class="input required">Grupo Sanguineo</label> <select name="vGruposa" id="select" class="inputclass pageRequired" title="Selecciona tipo de Sangre">
<option value="">-Selecciona Grupo Sanguineo-</option>
<option value="1">O+</option>
<option value="2">O-</option>
<option value="3">A+</option>
<option value="4">A-</option>
<option value="5">B+</option>
<option value="6">B-</option>
<option value="7">AB+</option>
<option value="8">AB-</option>
</select>
<br />

<label for="vEmail" class="input required">Email</label> <input name="vEmail" id="vEmail" class="inputclass pageRequired" equalTo:"'#vEmail" maxlength="254" title="Confirma tu Direccion de Correo" /> <br />
</select>
<label for="vCurp" class="input required">Curp</label> <input name="vCurp" id="vCurp" class="inputclass pageRequired" equalTo:"'#vCurp" maxlength="254" title="Confirma tu CURP" /> <br />
</select>
<label for="vTaller" class="input required">Taller</label>
<select name="vTipoTaller" id="select" class="inputclass pageRequired" title="Requiere un taller">
<option value="">-Selecciona un taller-</option>

<?
$res = mysql_query("Select * From tipo_talleres Order By Id_tipo") or die ("Error al realizar la consulta en el taller");
$i=0;
while($arreglo = mysql_fetch_array($res))
{
$query[0] = $arreglo[Id_tipo];
$query[1] = $arreglo[Nombre];
?>
<option value="<?echo $query[0]?>"> <?echo $query[1]?> </option>

<?
$i=$i+1;

}

?>
</select>


<div
class="buttonWrapper"><input name="boton1" type="submit" class="boton1" value="Aceptar" alt="Enviar" title="Enviar"></input>
<input type="button" value="Cancelar" title="Cancelar" onClick=" window.location.href='index.php' "></input>
</div>

</fieldset>
</div>
</li>



</ul>
</form>

</div>
</div>
</body>
</html>

COMO TENDRIA QUE QUEDAR PORFAS..!!!

Jose Ernesto Cuchallo Aguilar

01/9/2011
Agradecimiento
Mil gracias... Realmente lo necesitaba, agradezco de todo corazon a la persona que publico esta pagina para el bien y desarrollo humano espero salir profesional pronto y unirme a esta pagina y sus objetivos... mil gracias nuevamente.

mili_07

20/10/2011
Consulta formato fecha fijo
Tengo una duda acerca de como hacer para programar con Javascript un campo de fecha que tenga un formato fijo por ejemplo yo quiero que muestre el campo así "00/00/0000" . Alguien me podrá responder.
Desde ya gracias.

jose

14/12/2011
Solucion
Che yo tengo un formulario que tengo que validar el usuario y el campo email, para que no se ingresen dos veces los mismos valores en esos campos, y no puedo hacerlo, alguien que tenga un codigo de esto, se que no es dificil pero me esta costando trabajo?????

anonimo moskeado

21/12/2011
LA PUTA MIERDA DE SCRIPT!
menuda puta basura! no funciona NADA! me envia el valor del boton aunke este mal...
ESTOY HARTO DE K LA PUTA GENTE KUELGE MIERDAS EN INTERNET K ESTAN MAL SIN TENER NI PUTA IDEA!!

ALA K OS JODAN YA ME E KDAO AGUSTO!

Jonas

03/1/2012
Reutilizacion de codigo
Como puedo meter la validacion de todos mis campos en una sola funcion?, para reutilizar la validacion de los campos con el mismo nombre

danilo

06/2/2012
CORREO ELECTRONICO
donde coloco el correo electronico aqui en este archivo.?

porque una vez llenados los campos se va el archivo pero a donde?

gracias

XnZero.com

17/2/2012
Agradecimientos
¡Muchas gracias!

paubalbuena

27/6/2012
Formulario envio a un Mail
Que codigo tendría que agregar para que el resultado sea enviado por mail?

<script language=javascript>



function validarFormulario(){

var isNotOk;

//validación nombre

var nombre = window.document.formValidar.nombre.value;
if (nombre==""){

document.getElementById("nombre").style.display="inline";
//window.document.formValidar.nombre.focus();
//return 0;
isNotOk=true;

}
else{

document.getElementById("nombre").style.display="none";

}

var telefono = window.document.formValidar.telefono.value;
if (telefono==""){

document.getElementById("telefono").style.display="inline";
//window.document.formValidar.nombre.focus();
//return 0;
isNotOk=true;

}
else{

document.getElementById("telefono").style.display="none";

}

//validación calle

var email = window.document.formValidar.email.value;
if (email==""){

document.getElementById("email").style.display="inline";
//window.document.formValidar.calle.focus();
//return 0;
isNotOk=true;
}
else{

document.getElementById("email").style.display="none";
}


//validación nro de calle
var mensaje = window.document.formValidar.mensaje.value;
if (mensaje==""){

document.getElementById("mensaje").style.display="inline";
//window.document.formValidar.calle.focus();
//return 0;
isNotOk=true;
}
else{

document.getElementById("mensaje").style.display="none";
}


if (isNotOk){
return 0;


}
else{
window.document.formValidar.submit();
}



}
</script>

<form name="formValidar" >

<table>

<tr>
<td>Nombre:</td>
<td>
<input type=text name="nombre" maxlength=30></td>
<td>
<div id="nombre" style="display:none; color:red">&nbsp;Nombre inválido</div>
</td>
</tr>
<tr>
<td>Teléfono</td>
<td>
<input type=text name="telefono" maxlength=20></td>
<td>

<div id="telefono" style="display:none; color:red">&nbsp;Telefono Invalido</div>

</td>

</tr>
<tr>
<td>Email</td>
<td>
<input type=text name="email" maxlength=20></td>
<td>

<div id="email" style="display:none; color:red">&nbsp;Calle inválida</div>

</td>


</tr>

<tr>
<td>Mensaje</td>
<td>
<input type=text name="mensaje" ></td>
<td>

<div id="mensaje" style="display:none; color:red">&nbsp;Número inválido</div>

</td>


</tr>

<tr><td>

</tr></td>



</table>

</form>

Jordy

10/8/2012
Ayuda
oye porfa necesito validar este fromulario pero lo hice con tu ejemplo y no me queda

<!DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN ""http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict. dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head >
<TITLE>Abarrotes los gueros</TITLE>
<link rel="stylesheet" type="text/css" href="css/estilos.css" media="screen"/>
</head>

<body>
<script>
function valida_envia(){

//valido el codigo. tiene que ser entero
cod = document.fvalida.cod.value
cod = validarEntero(cod)
document.fvalida.cod.value=codigo
if (cod==""){
alert("Tiene que introducir un número entero.")
document.fvalida.cod.focus()
return 0;
}


//valido el nombre
if (document.fvalida.nom.value.length==0){
alert("Tiene que escribir su nombre")
document.fvalida.nom.focus()
return 0;
}

//el formulario se envia
alert("Muchas gracias por enviar el formulario");
document.fvalida.submit();

}
</script>
<center>
<form name="fvalida">
<table>

<tr>
<td>Codigo:</td><td><input type =" text " name ="cod" size ="20" maxlength="2" /></td>
</tr>
<tr>
<td>Nombre:</td><td><input name="nom" size="20" maxlength="100"></td>
</tr>


<td colspan="2" align="center"><input type="button" value="Enviar" onclick="valida_envia()"></td>
</table>
</center>
</form>
</body>
</html>

Yadi

15/8/2012
Good!!
Muchas gracias por el ejemplo, me ha servido de mucho tu aporte... Para los que no saben donde se encuentra la función validarEntero, el autor del texto hace una explicación después del código y en la parte que corresponde a la validación de edad, él coloca un link donde redirige a la función.

Darinka

21/5/2013
Podrian ayudarme a validar checkboxes multiples y de 2
Hola, olaja el mismo chico que publico las validaciones Esteban; que dijo como hacer validaciones sin pop up me ayudara o si alguien mas sabe como hacerlo, lo agradeceria bastante

este es lo que hice, solo me mostraba el msj en un inicio, ahora ya ni eso

var conferencia = window.document.formValidar.conferencia.checked;
elemento = document.getElementById("conferencia");
if( !elemento.checked )
{
document.getElementById("conferencia").style.display = "inline";
isNotOk=true;//return false;
}
else
{
document.getElementById("conferencia").style.display = "none";
}


parte del form

<label for="conferencia"></label>
<input type="checkbox" id="conferencia" name="conferencia" value="Si" />&nbsp;Si <br />
<input type="checkbox" name="conferencia" value="No" >&nbsp; No
<div id="conferenciasi" style="display:none; color:red;"><br />Solo uno</div>

Lo que quiero es que me ponga una alerta a un lado diciendo debes elegir una opcion y para multiples checkbox tambien.
Gracias de ante mano =)

Roberto

30/7/2013
gracias
saludos Exelente explicacion me acabas de salvar la vida y el trabajo

EngEsc

03/11/2013
Error en el codigo
Eso que colocaste de edad = validarEntero(edad) no debe colocarse si quieres que el código funcione perfectamente