Terminamos de ver en este vídeo la API forms enumerando algunos estados de validación de formularios que pueden ser de utilidad.

Para más cursos, manuales y ejercicios visita http://www.pildorasinformaticas.com

source

1 Comentario

  1. saludo ,,,, me puede decir en que me equivoco poruqe no me presenta el mensaje que editamo solo el de nabagador, este es mi codigo

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <style>

    table{
        text-align:center;
        background:#FF9966;
        width:25%;
        margin:auto;
        border:2px #FF3300 dashed;
    }

    td{
        padding:15px;

    }

    </style>

    <script>
     var edad;
     
    function comenzar(){
        
        edad=document.getElementById("miedad");
        
        edad.addEventListener("change",cambia_rango,false);
        
         document.datos_usuario.addEventListener("invalid",validarr, true);
        
        document.getElementById("Enviar").addEventListener("click",enviar,false);
        
        document.datos_usuario.addEventListener("input",validar_tiempo_real,false);
        
    }

    function cambia_rango(){
        
      var salida=document.getElementById("rango");
     
      var calculo=edad.value-30;
     
      if(calculo<30){
          calculo=0;
          
          edad.value=30;
      }
      salida.innerHTML=calculo+" a "+edad.value;
        
    }

    function validar(e){
        
        var elemento=e.target;
        elemento.style.background="#FFDDDD";
        

    }

    function enviar(){
        
        var cuadro_usuario=document.getElementById("usuario");
        
        var correcto=document.datos_usuario.checkValidity();
        
        if (correcto==true){
            
            document.datos_usuario.submit();
            
        }else if(cuadro_usuario.validity.valueMissing==true || cuadro_usuario.validity.patternMismatch==true){
                 
                 alert("El usuario no puede estar vacio y recuerda que tiene que tener 3 letras");    
        }
    }
     
    function validar_tiempo_real(e){
        0
        var elemento=e.target;
        
        if(elemento.validity.valid==true){
            
            elemento.style.background="#FFFFFF";
            
        }else{
            elemento.style.background="#FFDDDD";
        }
        
        
    }
        
    window.addEventListener("load",comenzar,false);

    </script>

    <body>
    <section>

    <form name="datos_usuario" method="get">

    <table><tr><td>
    Usuario:</td><td><input pattern="[A-Za-z]{3}" name="usario" id="usuario" maxlength="10" required></td></tr>
    <tr><td>
    Email:</td><td><input type="email" name="miemail" id="miemail" required></td></tr>
    <tr><td>
    Edad:</td><td><input type="range" name="miedad" id="miedad" min="0" max="120" value="30" step="30"></td></tr>
    <tr><td>
    <output id="rango">0 a 30</output>
    </td></tr>
    <tr><td>
    <input type="submit" id="Enviar" value="Registrar"></td></tr>
    </table>

    </form>

    </section>
    </body>
    </html>

  2. Muchas gracias por tanto aportes,  la verdad que valoro mucho tu trabajo.

    Hay algo que no entiendo, ahora que ya tengo todos los datos validados, y de la forma que los necesito, ¿como y donde se guardan?

  3. cuando escribo una condicional, por ejemplo "if((cuadro_usuario.validity.valueMissing==true) || (cuadro_usuario.validity.patternMismatch==true))", el dw me marca en rojo diciendo "Expected'===' and instead saw '==' "
    el hecho de que no utilice ese '=' extra que me dice generara algun error de sintaxis?

  4. Gracias por los videos que estan subiendo..
    consulta? el mensaje personalizado alert no funciona… he revizado, si el chrome tiene algun bloqueo pero me indica que NO.. y el codigo esta igual… gracias anticipadamente..

  5. if((cuadro_usuario.validity.valueMissing==true)||(cuadro_usuario.validity.patternMismatch==true))
    Toca utilizar doble paréntesis de lo contrario me generará error, utilizo DW5.5.
    Yo entiendo la ley de los signos y operadores y la ley del uso de paréntesis, pero ¿Por qué a usted si le funciona como lo hace en el vídeo?

  6. Hola Juan. Ante todo enhorabuena por el esfuerzo y por la calidad de tu trabajo. Te paso a comentar mi problema. He copiado tu código tal cual y los mensajes de alert no ,e aparecen ni en chrome ni en safari, que son los navegadores que yo utilizo. Me puedes echar una mano para buscar una explicación? Muchas gracias.

  7. Buenos Dias Juan. Me encantan tus cursos y me parecen muy didácticos. Pero me quedo algo haciendo ruido, quizas venga mas adelante y me estoy apurando. Y es lo siguiente: en el caso de hacer un formulario completo, una vez que se cargan los datos, donde quedarian almacenados?

  8. Hola profesor soy nuevo en esto, quizás yo mismo me este respondiendo pero. Si los estados de validación son booleanos (True o False), entonces es necesario indicarle que el valor sea True? yo lo he puesto y me ejecuta de igual forma ahora esto podría traer algún problema. es decir que "/ else if (cuadro_usuario.validity.valueMissing==true) { alert("El Usuario no puede estar vació"); }/" es lo mismo que decir "/ else if (cuadro_usuario.validity.valueMissing) { alert("El Usuario no puede estar vació"); }/" Disculpe mi pregunta.

  9. oo me e puesto a ver comentario y veo que cuando hacen pregunta el profeso le conteste y no es como los otros canale que sube el video y no le importa quien le escribrio que solo le importa el dinero canales como este se merecen que triunfen te felicito y espero que llegue a los 300k de sub y hasta mas e mas hasta los 15 millores de sub sigue asi

  10. Profe una pregunta, usted sabe como hacer para q la caja tenga zonas puntiagudas
    como en la caja que sale en el navegador 8:37, asi mismo como usted tiene su caja de navegación en su pagina web, lo intentado con border-radius, pero solo es la parte inferior, pero quiero arriba nada.

  11. Gracias Instructor Por su enseñanza solo una curiosidad por que en el chrome no me da la validación del navegador tan solo pone el alert y firefox si me pone el alert y la validación del navegador rellene este bendiciones

  12. Hola Juan, ahora saludandote por este lado, me estan pasando 2 cosas raras con este ejercicio, numero 1 que en los eventos de la funcion comenzar al parecer esta afectando la supuesta jerarquia que hace el tercer parametro del metodo addEventListener, es decir el boolean, como ves a diferencia de tu codigo yo pase el de la validacion en tiempo real como penultimo en lugar de ultimo, esto lo hice a manera de prueba y ya me funciono, si lo dejo al final no me funciona?? o sea que algo desconcertado al respecto. Y el otro punto es que no me funciona lo del mensaje de java en ningun navegador, o sea solo me sale el mensaje propio del navegador….

Dejar respuesta

Please enter your comment!
Please enter your name here