Validate javascript and html form

Question

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

[`getElementsByName`](https://stackoverflow.com/questions/3856697/how-to-get-a-html-element-by-name/3856709#3856709) returns a collection and not a single element. Also I recommend, even if possible, not to reuse the keyword `name` as variable name. — Lain, May 02 '22 at 09:18
Click on the link. You actually handled it corretly later on with the buttons. — Lain, May 02 '22 at 09:19
The problem is that in my exercise I can't modify any of the HTML and I can't add id either. — Miriam Beltra, May 02 '22 at 09:24
Also your `label` tags can not fullfil their purpose with that structure. — JavaScript, May 02 '22 at 11:43

score 0 · Answer 1 · answered May 02 '22 at 11:35

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.

Validate javascript and html form

1 Answers1

Issue

Possible solution

Example