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

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «<font size=5 color=red>VOLVER</font>»)
 
 
(Una revisión intermedia por el mismo usuario no mostrado)
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>]]
 +
;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
 +
 +
<source lang=javascript>
 +
<!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>
 +
</source>

Última revisión de 13:53 14 abr 2016

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»