Estoy haciendo un ejercicio pero no puedo validar y enviar un formulario.
Tengo este código HTML, al que no puedo agregar ni modificar nada:
</head> <body> <h1>Card game</h1> <p> <label>Displays the name of the participant</label ><input type="text" name="name" /> </p> <p> <label>how many games do you want to play? </ tag ><input type="number" name="games" value="0" /> </p> <button>PARTICIPATE!</button> <script type="text/javascript" src="rockPaperScissors.js"></script> </body>Estoy tratando de validar el formulario, que debería poner los campos en rojo cuando presiono el botón de participar y no cumple con las condiciones de validación. Una vez corregidos los datos y validado el formulario, se deben desactivar los campos para que no se puedan volver a escribir y queden visuales.
He hecho esto pero no consigo mi objetivo:
function validateName() { const name = document.getElementsByName("name"); const expression1 = /[A-Za-z]{3,}/; name.click(); if (!expression1.test(name.value)) { name.classList.add("RedBackground"); false return; } return true; } function validateGames() { games.click(); const items = document.getElementsByName("items"); if (games.value <= 0) { games.classList.add("RedBackground"); false return; } return true; } // Indicate who launches the events document .getElementsByTagName("button")[0] .addEventListener("click", validateName); document .getElementsByTagName("button")[0] .addEventListener("click", validateGames); <input type="text" name="name" /> const name = document.getElementsByName("name"); getElementsByName devuelve una colección y no un solo elemento.
Para obtener el primer elemento cuyo atributo de name es igual a name , debe obtener el primer índice de la colección:
const name = document.getElementsByName("name")[0]; o querySelector que devuelve el primer elemento coincidente.
const name = document.querySelector("[name=name]"); document.querySelector("button").addEventListener("click", function(){ //REM: Is everything valid? let tValid = true; //REM: Validate "name" using "querySelector" let tName = document.querySelector("[name=name]"); if(tName){ //REM: Put your logic here tName.classList.add("RedBackground"); tValid = false }; //REM: Validate "games" using "getElementsByName" let tGames = document.getElementsByName("games")[0]; if(tGames){ //REM: Put your logic here tGames.classList.add("BlueBackground"); tValid = false }; return tValid }); .RedBackground{ background-color: crimson } .BlueBackground{ background-color: cornflowerblue } <h1>Card game</h1> <p> <label>Displays the name of the participant</label> <input type="text" name="name" /> </p> <p> <label>how many games do you want to play? </ tag> <input type="number" name="games" value="0" /> </p> <button>PARTICIPATE!</button> Recomiendo, aunque sea posible, no reutilizar el name de la palabra clave como nombre de variable.