Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ3

De WikiEducator
Saltar a: navegación, buscar

VOLVER

Para hacer este ejercicio ten encuenta los siguientes aspectos
  • JQuery puede hacer la validación en diferentes instantes
  • En resument la puede hacer cuando ocurren los siguientes eventos 
    onsubmit, onfocusout, onkeyup, onclick
  • Por defecto JQuery hace la validación cuando puede
  • Si queremos evitar que lo haga lo hemos de explicitar en la inviación al método 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <!--Estilos para cumplir con enunciado: -->
    <style>
        .important{color:red; font-weight:bold;}
        label{display:inline-block; width:200px;}
        input[type="submit"]{margin-left:200px;}
    </style>
    <!--Cargamos los scripts necesarios para poder hacer las validaciones:-->
    <!--Los scripts se cargan siempre después de los css, nunca antes!-->
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
        <script>
       $(document).ready(init);
       function init(){
        $("#formulario").validate(
                                {
                                 onkeyup: false, 
                                 onfocusout: false, 
                                 onclick:false
                                }
                                );
    </script>
</head>
<body>
    <form id="formulario" novalidate  action="accion.php" method="post">
        <div>
        <label for="nombre">Nombre:
            <span class="important">*</span>
        </label>
        <input type="text" id="nombre" name="nombre" class="required" minlength="2"/>
        </div>
        <div>
            <label for="email">E-mail:
            <span class="important">*</span>
        </label>
        <input type="email" id="email" name="email" class="required" />
        </div>
        <div>
        <label for="url">Url:</label>
        <input type="url" id="url" name="url" class="url"/>
        </div>
        <div>
        <label for="comentarios">Comentarios:</label>
        <textarea id="comentarios" name="comentarios" class="required"></textarea>
        </div>
        <div>
        <input type="submit" value="Enviar" />
        </div>
    </form>
 
</body>
 
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ3&oldid=19374»