Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/validate/solucionEJ6»
De WikiEducator
< Usuario:ManuelRomero | JavaScript | jquery | validate
(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>]] | ||
+ | |||
+ | <source lang=html5> | ||
+ | <!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> | ||
+ | |||
+ | </source> |
Última revisión de 02:40 15 abr 2016
<!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>