lunes, 22 de octubre de 2012

HTML validar formulario con javascript


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script type="text/javascript">
            function Solo_Numerico(variable){
/*                    Numer=parseInt(variable);
                    if (isNaN(Numer)){
                        return true;
                    }
                    return Numer;*/
             }
            function verifica_selector(formas) {
//            if ((document.forms.ejemplo.selector.value == "") || (document.forms.ejemplo.selector.value== null)) {
            if ((formas.selector.value == "") || (formas.selector.value== null)) {
                   formas.selector.style.background="pink";
                   document.getElementById('mess_selector').innerHTML = "error";
                   document.getElementById('mess_selector').style.display = "block";
                   formas.selector.value = "";
                   formas.selector.focus();
                   return false;
                }
                     else {
                       formas.selector.style.background="";
                        document.getElementById('mess_selector').style.display = "none";
                        return true;}
            }
            function validaEmail(cual) {
                var _es_email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
                sivale = _es_email.test(cual.email.value);
 //               if (!sivale){
                if ((cual.email.value == "") || (cual.email.value== null)) {
                             cual.email.style.background="pink";
                            document.getElementById('capa_oculta').innerHTML = "error";
                            document.getElementById('capa_oculta').style.display = "block";
//                            cual.email.value = "";
//                            cual.email.focus();
                            return false;
                }
                        else {
                            cual.email.style.background="";
                            document.getElementById('capa_oculta').style.display = "none";
 //                           cual.email.focus();
                            return true;
                        }
            }
            function validatePass(campo) {

                var RegExPattern = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/;
                var errorMessage = 'Password Incorrecta.';
                //&& (campo.pass.value!=''))
                if ((!campo.pass.value.match(RegExPattern)) )  {
                     campo.pass.style.background="pink";
                    document.getElementById('mess_pass').innerHTML = "Password Incorrecta.";
                     document.getElementById('mess_pass').style.display = "block";
                    campo.pass.focus();
                    return false;
               } else {
                    campo.pass.style.background="";
                     document.getElementById('mess_pass').style.display = "none";
                    campo.pass.focus();
                    return true;
                }
            }

            function validar_todos(formas) {
                if (validatePass(formas) && validaEmail(formas) && verifica_selector(formas)){
                    return true;
                   } else {
                    return false;
                }
            }
 </script>       
    </head>
    <body>
        <form name="ejemplo" action="pruebaformulario.html" method="get">

          <!--document.forms.ejemplo.email.value
          document.forms.ejemplo
          this.value
          -->
        <table>
          <tr>
            <td>password
                <input type="password" id="pass" name="pass"  onkeyup="javascript:validatePass(document.forms.ejemplo);"  onkeypress="javascript:validatePass(document.forms.ejemplo);" onmousedown="javascript:validatePass(document.forms.ejemplo);">
            </td>
            <td>
                <div style=" display: none;color:red; " id='mess_pass' ></div>
            </td>
          </tr>
            <tr>
                <td>email
                    <input type="text" id="email" name="email"  onkeyup="javascript:validaEmail(document.forms.ejemplo);"  onkeypress="javascript:validaEmail(document.forms.ejemplo);" onmousedown="javascript:validaEmail(document.forms.ejemplo);">
                </td>
                <td>
        <div style=" display: none;color:red;" id='capa_oculta' ></div>
                </td>
            </tr>
        <tr>
           <td>
                <select name="selector" onkeyup="javascript:verifica_selector(document.forms.ejemplo);"  onkeypress="javascript:verifica_selector(document.forms.ejemplo);" onmousedown="javascript:verifica_selector(document.forms.ejemplo);">
                <option value="" >Seleccione un mueble</option >
                <option value="cama" >cama</option >
                <option value="mesa" >mesa</option >
                <option value="silla" >silla</option >
                </select >
           </td>
           <td>
                <div style=" display: none;color:red;" id='mess_selector' ></div>
           </td>
        </tr>
        </table>
        <input type="submit" value="grabar" name="Ingreso" onclick="javascript:return validar_todos(document.forms.ejemplo);">
        </form >
    </body>
</html>

0 comentarios :

Publicar un comentario