Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ2

De WikiEducator
Saltar a: navegación, buscar

Usuario:ManuelRomero/JavaScript/jquery/validate

Realiza el ejercicio teniendo en cuenta las siguientes acciones

  1. Los scripts se colocarán siempre más tarde que las hojas de estilos.
  2. Se debe cargar primero el de jQuery y luego el del plugin de jQuery. Siempre en ese orden.
  3. La llamada al método validate() se puede hacer en el document ready, pero también poniéndolo al final del body (el plugin debe estar cargado previamente, eso sí).
El plugin utiliza el atributo name, es importante ponerlo en cada elemento del formulario. 
<!doctype html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <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:-->
    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script>
        $(document).ready(function() {
            $("#formulario").validate();
        });
    </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="email 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>
    <!--
    <script>
        $("#formulario").validate();
    </script>
    -->
</body>
 
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ2&oldid=19346»