Validate javascript and html form-CodePudding

I'm doing an exercise but I can't validate and send a form.

I have this HTML code, to which I cannot add or modify anything:

</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>

I am trying to validate the form, which should turn the fields red when I hit the participate button and does not meet the validation conditions. Once the data has been corrected and the form has been validated, the fields must be deactivated so that they cannot be written again and remain visual.

I have done this but I don't get my goal:

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);

CodePudding user response：

Issue

<input type="text" name="name" />
const name = document.getElementsByName("name");

getElementsByName returns a collection and not a single element.

Possible solution

To get the first element whose name attribute equals name, you have to either get the first index of the collection:

const name = document.getElementsByName("name")[0];

or querySelector which returns the first matching element.

const name = document.querySelector("[name=name]");

Example

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>

I recommend, even if possible, not to reuse the keyword name as variable name.

CodePudding user response：

create a id for the button and use getElementById instead of getElementsByName that will help you