Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ6»

De WikiEducator
Saltar a: navegación, buscar
 
Línea 1: Línea 1:
 
[[Usuario:ManuelRomero/JavaScript/jquery/validate|<font size=5 color=red>VOLVER</font>]]
 
[[Usuario:ManuelRomero/JavaScript/jquery/validate|<font size=5 color=red>VOLVER</font>]]
−
;Pautas para realizarlo
+
 
−
*Para hacer este ejercicio usaremos el método '''''errorPlacement'''''
+
−
*Con este elemento podemos definir como valor una función que recibe como parámetros el error producido y el elemento que lo ha generado
+
−
*Podemos hacer una acción '''''insertBefore''''' para conseguir nuestro cometido
+
 
<source lang=html5>
 
<source lang=html5>
 
<!doctype html>
 
<!doctype html>

Última revisión de 02:40 15 abr 2016

VOLVER 

<!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;}
        .error{width:auto; color:red;font-size:small;}
    </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>
</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" />
        </div>
        <div>
            <label for="email">E-mail:
                <span class="important">*</span>
            </label>
            <input type="email" id="email" name="email" />
        </div>
        <div>
            <label for="url">Url:</label>
            <input type="url" id="url" name="url" />
        </div>
        <div>
            <label for="comentarios">Comentarios:</label>
            <textarea id="comentarios" name="comentarios"></textarea>
        </div>
        <div>
            <input type="submit" value="Enviar" />
        </div>
    </form>
    <script>
        $("#formulario").validate({
            onkeyup: false,
            onfocusout: false,
            onclick: false,
            rules: {
                nombre: "required",
                email: "required",
                comentarios: "required"
            },
            errorPlacement: function(error, element) {
                error.insertBefore(element);
            }
        });
    </script>
</body>
 
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ6&oldid=19362»