Validar campo Correo Electronico y campos numericos

flashtrix · #1 (**permalink**) 13/04/2013, 09:53

Hola este Script lo tengo listo, me valida la información con cuadros alert cuando falta alguno por llenar y retorna al campo (focus) que hace falta..

El ejemplo me sirve es decir funciona....

Pero necesito:

1. Que en el campo correo verifique que en realidad se este escribiendo un correo osea que contenga la arroba @ y todo eso.

2. Ademas quiero que solo en los campos numeroidentificacion, edad y celular solo se puedan escribir números.

Acá pongo el script para que por favor me ayuden a modificarlo pues busco en otros tutoriales y agrego lineas de codigo pero al probarlo se me daña todo lo que ya llevaba

Código Javascript:

Ver 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=utf-8" />
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=4)">
<title>Documento sin título</title>
<script language="javascript">
function valida_envia(){ 
//valido el nombre 
    if (document.fvalida.nombres.value.length==0){ 
         alert("Tiene que ingresar su nombre completo") 
         document.fvalida.nombres.focus() 
         return 0; 
    } 
//valido el apellido
    if (document.fvalida.apellidos.value.length==0){ 
         alert("Tiene que ingresar su apellido completo") 
         document.fvalida.apellidos.focus() 
         return 0; 
    } 
//valido el tipo de identificacion
        if (document.fvalida.tipo.value=='0'){ 
         alert("Seleccione su tipo de identificación") 
         document.fvalida.tipo.focus() 
         return 0; 
    } 
//valido la identificacion
        if (document.fvalida.numeroidentificacion.value.length==0){ 
         alert("Ingrese su número de identificación") 
         document.fvalida.numeroidentificacion.focus() 
         return 0; 
     }
//valido el correo
if (document.fvalida.correo.value.length==0){ 
         alert("Ingrese su correo electronico") 
         document.fvalida.correo.focus() 
         return 0; 
     }
//valido la edad. tiene que ser entero mayor que 18 
if (document.fvalida.edad.value.length==0){ 
         alert("Ingrese su edad") 
         document.fvalida.edad.focus() 
         return 0; 
     }  
//valido la ocupacion 
if (document.fvalida.ocupacion.value.length==0){ 
         alert("Debe ingresar su ocupación, por ejemplo: si es docente, empleado, estudiante, desempleado, etc.") 
         document.fvalida.ocupacion.focus() 
         return 0; 
    } 
//valido celular 
if (document.fvalida.celular.value.length==0){ 
         alert("Ingrese su numero de celular o teléfonico") 
         document.fvalida.celular.focus() 
         return 0; 
    } 
//valido el lugar de residencia
if (document.fvalida.residencia.value.length==0){ 
         alert("Ingrese el lugar de residencia, por ejemplo: si es de Corozal, de un corregimiento de Corozal, etc.") 
         document.fvalida.residencia.focus() 
         return 0; 
    } 
//el formulario se envia 
    //alert("Muchas gracias por Inscribirse, espere en su correo electronico más información"); 
    document.fvalida.submit(); 
}
 
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];}}
}
</script>
<style type="text/css">
.txt1 {
    font-size: 10px;
}
.txt1 {
    font-size: 12px;
}
.txt1 .txt1 strong {
    font-size: 14px;
}
.text22 {
    color: #039;
}
.txt1 .txt1 strong {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.txt1 .text22 strong {
    font-family: Arial, Helvetica, sans-serif;
}
.txt1 .text22 strong {
    font-size: 12px;
}
.txt1 .text22 strong {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.txt1 .txt1 strong {
    text-align: center;
}
#apDiv1 {
    position:absolute;
    left:87px;
    top:558px;
    width:188px;
    height:45px;
    z-index:1;
}
.txt {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    font-size: 13px;
}
#apDiv2 {
    position:absolute;
    left:12px;
    top:16px;
    width:360px;
    height:106px;
    z-index:1;
}
#apDiv3 {
    position:absolute;
    left:148px;
    top:595px;
    width:80px;
    height:34px;
    z-index:1;
}
</style>
</head>
 
<body>
<table width="359" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="359"><center><img src="arriba2.jpg" width="360" height="107" /></center></td>
  </tr>
  <tr>
    <td height="506"><form id="fvalida" name="fvalida" method="post" action="enviar.php">
      <table width="338" border="0" align="center" cellpadding="0" cellspacing="1">
        <tr>
          <td height="63" colspan="2"><img src="regeltainscanimado.gif" width="324" height="63" /></td>
        </tr>
        <tr>
          <td height="19" colspan="2" class="txt">Muchas gracias por su interes en participar en el Taller Redes Sociales, por favor para continuar, suministre la informacion personal del siguiente formulario y asi validar su incripción.</td>
        </tr>
        <tr>
          <td width="150" height="19" class="txt">&nbsp;</td>
          <td width="182">&nbsp;</td>
        </tr>
        <tr>
          <td height="28" class="txt">Nombres:</td>
          <td><input type="text" name="nombres" id="nombres" /></td>
        </tr>
        <tr>
          <td height="28" class="txt">Apellidos:</td>
          <td><input type="text" name="apellidos" id="apellidos" /></td>
        </tr>
        <tr>
          <td height="28" class="txt">Tipo Identificación:</td>
          <td><select name="tipo" id="tipo">
            <option value="0">Seleccione</option>
            <option value="Cedula de Ciudadania">Cédula de Ciudadania</option>
            <option value="Tarjeta de Identidad">Tarjeta de Identidad</option>
            <option value="Cedula Extranjeria">Cédula Extranjería</option>
            <option value="Otro">Otro</option>
          </select></td>
        </tr>
        <tr>
          <td height="26" class="txt">Numero de Identificación:</td>
          <td><input name="numeroidentificacion" type="text" id="numeroidentificacion" maxlength="14" /></td>
        </tr>
        <tr>
          <td height="26" class="txt">Correo Electronico:</td>
          <td><input type="text" name="correo" id="correo" /></td>
        </tr>
        <tr>
          <td height="27" class="txt">Edad:</td>
          <td><input name="edad" type="text" id="edad" size="3" maxlength="2" /></td>
        </tr>
        <tr>
          <td height="29" class="txt">Ocupación:</td>
          <td><input type="text" name="ocupacion" id="ocupacion" /></td>
        </tr>
        <tr>
          <td height="30" class="txt">Celular o Teléfono:</td>
          <td><input name="celular" type="text" id="celular" maxlength="11" /></td>
        </tr>
        <tr>
          <td height="26" class="txt">Lugar de Residencia:</td>
          <td><input type="text" name="residencia" id="residencia" /></td>
        </tr>
        <tr>
          <td height="19" class="txt">&nbsp;</td>
          <td height="19" class="txt"><input type="button" value="Inscribirse" onclick="valida_envia()" /></td>
          </tr>
        <tr>
          <td height="26" colspan="2" class="txt"><center></center></td>
          </tr>
      </table>
      <span class="txt1"><strong>
<center>
  <a href="anuncio.html"><img src="regresar1.jpg" name="regrbotn" width="80" height="34" border="0" id="regrbotn" onclick="history.back(-1);"/></a>
</center>    <br />
      </strong></span>
    </form></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

isabelramirezmontoya · #2 (**permalink**) 13/04/2013, 10:59

Hola flashtrix,

Para validar la direcciones correo en mis formularios yo uso estas lineas y me funcionan perfecto.

if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.getElementById('email').value))) {
alert(" Direccion de E-MAIL no valida ");
return false;
}

Para los campos en los cuales necesitas numeros unicamente utilizo estas lineas y me funiona perfecto.

if (!(/^[0-9]+$/.test(document.getElementById('celular').value))) {
alert(" Contraseña no valida ");
return false;
}

Aclaro que estas lineas no las invente yo, buscando en el foro y con ayuda de otros compañeros del foro las implemente.

Espero te sirvan

flashtrix · #3 (**permalink**) 13/04/2013, 11:04

Hola Isabel muchas gracias por responder, la informacion que me pasas se que es así, la he visto en todos los tutoriales que he visto. pero como la aplico a mi ejemplo...

pues he usado loq ue me pasas y el codigo me deja de funcionar con las alertas, sera que lo pongo mal, por fa

gracias...

alex1084 · #4 (**permalink**) 13/04/2013, 11:10

Aplicalo de la misma forma que aplicas las otras validaciones, nada mas es de agregar los if en los lugares correctos.

Tambien puedes ocupar jquery para validar los formularios

http://nomeaclaro.wordpress.com/2010...ry-y-validate/
http://docs.jquery.com/Plugins/validation
http://speckyboy.com/2009/12/17/10-u...d-tutorials-2/
http://bassistance.de/jquery-plugins...in-validation/
http://abreo.co/8-excelentes-plugins...r-formularios/

flashtrix · #5 (**permalink**) 14/04/2013, 11:08

no he podido...