tarea clase 7, se realizan funciones para validar los datos de los in… #64
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" | ||
| charset="UTF-8"> | ||
| <title>Carta a Papá Noel</title> | ||
|
|
||
| <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,900" rel="stylesheet"> | ||
|
|
@@ -12,101 +13,108 @@ | |
|
|
||
| <body> | ||
|
|
||
| <header> | ||
| <ul> | ||
| <li><a href="wishlist.html">Tu lista de deseos</a></li> | ||
| <li> | ||
| <h1>Carta a santa</h1> | ||
| </li> | ||
| <li><a href="resultado.html">Tu regalo</a></li> | ||
| </ul> | ||
| </header> | ||
|
|
||
| <section> | ||
| <img src="img/gift_top.svg" class="gift_top" alt="Imagen de un regalo"> | ||
| <form method="post" name="formulario" id="carta-a-santa"> | ||
| <p>Querido Santa,</p> | ||
| <p>Mi nombre es<input type="text" name="nombre" id="nombre" value="Diego"> y vivo en | ||
| <select name="ciudad"> | ||
| <option value="">Selecciona...</option> | ||
| <option value="Buenos Aires">Bs. As.</option> | ||
| <option value="Catamarca">Catamarca</option> | ||
| <option value="Chaco">Chaco</option> | ||
| <option value="Chubut">Chubut</option> | ||
| <option value="Cordoba">Cordoba</option> | ||
| <option value="Corrientes">Corrientes</option> | ||
| <option value="Entre Rios">Entre Rios</option> | ||
| <option value="Formosa">Formosa</option> | ||
| <option value="Jujuy">Jujuy</option> | ||
| <option value="La Pampa">La Pampa</option> | ||
| <option value="La Rioja">La Rioja</option> | ||
| <option value="Mendoza">Mendoza</option> | ||
| <option value="Misiones">Misiones</option> | ||
| <option value="Neuquen">Neuquen</option> | ||
| <option value="Rio Negro">Rio Negro</option> | ||
| <option value="Salta">Salta</option> | ||
| <option value="San Juan">San Juan</option> | ||
| <option value="San Luis">San Luis</option> | ||
| <option value="Santa Cruz">Santa Cruz</option> | ||
| <option value="Santa Fe">Santa Fe</option> | ||
| <option value="Sgo. del Estero">Sgo. del Estero</option> | ||
| <option value="Tierra del Fuego">Tierra del Fuego</option> | ||
| <option value="Tucuman">Tucuman</option> | ||
| </select>. | ||
| </p> | ||
|
|
||
| <p> Creo que este año he sido | ||
| <input type="radio" value="muy_bueno" name="comportamiento"> Muy bueno | ||
| <input type="radio" value="bueno" name="comportamiento"> Bueno | ||
| <input type="radio" value="maso" name="comportamiento" checked> Mas o menos. | ||
| </p> | ||
| <p>Este año realmente me gustaría recibir</p> | ||
| <p> | ||
| <textarea name="descripcion-regalo" rows="4" cols="45"></textarea> | ||
| </p> | ||
|
|
||
| <ul id="errores"> | ||
| </ul> | ||
|
|
||
| <p> | ||
| <button name="submit" id="enviar-carta"> | ||
| Enviar carta | ||
| </button> | ||
| </p> | ||
| </form> | ||
|
|
||
| <div id="exito" class="oculto"> | ||
| <strong>Tu envío fue exitoso!</strong> | ||
| </div> | ||
|
|
||
| <img src="img/gift_box.svg" class="gift_bottom"> | ||
| </section> | ||
|
|
||
| <footer> | ||
| <ul> | ||
| <li class="twitter"> | ||
| Twitter: | ||
| <a href="https://twitter.com/NodeGirlsSydney" target="_blank" | ||
| rel="noopener noreferrer">@NodeGirlsSydney</a> | ||
| <a href="https://twitter.com/NodeGirlsMelb" target="_blank" rel="noopener noreferrer">@NodeGirlsMelb</a> | ||
| <a href="https://twitter.com/NodeGirlsBri" target="_blank" rel="noopener noreferrer">@NodeGirlsBri</a> | ||
| <a href="https://twitter.com/NodeGirlsPerth" target="_blank" | ||
| rel="noopener noreferrer">@NodeGirlsPerth</a> | ||
| </li> | ||
| <li class="facebook"> | ||
| Facebook: | ||
| <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank" | ||
| rel="noopener noreferrer">NodeGirlsAustralia</a> | ||
| </li> | ||
| </ul> | ||
| <ul> | ||
| <li class="website"> | ||
| Website: | ||
| <a href="http://nodegirls.com.au" target="_blank" rel="noopener noreferrer">nodegirls.com.au</a> | ||
| </li> | ||
| <li class="email"> | ||
| e-mail: | ||
| <a href="mailto:[email protected]" target="_blank" | ||
| rel="noopener noreferrer">[email protected]</a> | ||
| </li> | ||
| </ul> | ||
| </footer> | ||
|
|
||
| <script src="js/main.js"></script> | ||
| <script src="js/pruebas.js"></script> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| const $form = document.querySelector("#carta-a-santa"); | ||
| const $nombre = $form.nombre.value; | ||
| const $ciudad = $form.ciudad.value; | ||
| const $comportamiento = $form.comportamiento.value; | ||
| const $descripcionRegalo = $form["descripcion-regalo"].value; | ||
|
|
||
| function validarNombre($nombre) { | ||
| if ($nombre.length === 0) { | ||
| return "Este campo debe tener al menos 1 caracter"; | ||
| } | ||
| if ($nombre.length >= 50) { | ||
| return "Este campo debe tener menos de 50 caracteres"; | ||
| } | ||
| return ""; | ||
| } | ||
|
|
||
| function validarCiudad($ciudad) { | ||
| if ($ciudad.length === 0) { | ||
| return "Debe seleccionar una ciudad"; | ||
| } | ||
| return ""; | ||
|
Comment on lines
+17
to
+21
There was a problem hiding this comment. Acá recibís |
||
| } | ||
|
|
||
| function validarDescripcionRegalo($descripcionRegalo) { | ||
| if ($descripcionRegalo.length === 0) { | ||
| return "Este campo no puede estar vacio"; | ||
| } else if ($descripcionRegalo.length >= 100) { | ||
| return "La descripcion del regalo no debe superar los 100 caracteres"; | ||
| } else { | ||
| return ""; | ||
| } | ||
| } | ||
|
Comment on lines
+24
to
+32
There was a problem hiding this comment. Acá lo mismo, recibís |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,37 @@ | ||
| function probarValidarNombre() { | ||
| console.assert( | ||
| validarNombre("") === "Este campo debe tener al menos 1 caracter", | ||
| "Validar nombre no validó que el nombre no sea vacío" | ||
| ); | ||
|
|
||
| console.assert( | ||
| validarNombre( | ||
| "111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" | ||
| ) === "Este campo debe tener menos de 50 caracteres", | ||
| "Validar nombre no validó que el nombre sea menor a 50 caracteres" | ||
| ); | ||
| } | ||
|
|
||
| function probarValidarCiudad() { | ||
| console.assert( | ||
| validarCiudad("") === "Debe seleccionar una ciudad", | ||
| "Validar ciudad no valido que el campo no este vacio" | ||
| ); | ||
| } | ||
|
|
||
| function probarValidarDescripcionRegalo() { | ||
| console.assert( | ||
| validarDescripcionRegalo("") === "Este campo no puede estar vacio", | ||
| "Este campo no puede estar vacio" | ||
| ); | ||
| console.assert( | ||
| validarDescripcionRegalo( | ||
| "1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" | ||
| ) === "La descripcion del regalo no debe superar los 100 caracteres", | ||
| "Validar descripcion regalo no valido que la descripcion del regalo sea menor a 100 caracteres" | ||
| ); | ||
| } | ||
|
|
||
| probarValidarNombre(); | ||
| probarValidarCiudad(); | ||
| probarValidarDescripcionRegalo(); |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Podrías guardar el 50 en una constante.