Why my if statements don't work properly?

Question

I am creating a program that has to check if the value in the input meets all the conditions if not display an error.

for(let i = 0; i < bannedNumbers.length; i++){
    signIn.addEventListener('click', ()=>{

        if(signInFirstName.value == ""){
            signInFirstName.nextSibling.textContent = "Fill in the field!"
        } else{
            if(signInFirstName.value.includes(bannedNumbers[i])){
                signInFirstName.nextSibling.textContent = "You can't use symbols or/and numbers in your first name"
            } else{
                signInFirstName.nextSibling.textContent = "vbvnv"
            }
        }
    })
        
}

Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jan 05 '22 at 11:04
Why are you adding bannedNumbers.length eventlisteners to one element? — mplungjan, Jan 05 '22 at 11:07
`for(let i = 0; i < bannedNumbers.length; i++){` likely belongs to just before the line `if(signInFirstName.value.includes(bannedNumbers[i])){` — mplungjan, Jan 05 '22 at 11:09
@mplungjan I want to check whether the value in the input contains any of the symbols in the bannedNumbers array — Ali Sherifov, Jan 05 '22 at 11:10
Did you debug your code? What did you find? If not, that's the way to go. (See [how](https://youtube.com/watch?v=Y3u2groOG-A)) — CherryDT, Jan 05 '22 at 11:10
Please post your HTML and an example of the "banned numbers". Your code does currently not make any sense — mplungjan, Jan 05 '22 at 11:12
It looks like you should read [Falsehoods Programmers Believe About Names](https://www.kalzumeus.com/2010/06/17/falsehoods-programmers-believe-about-names/) — jabaa, Jan 05 '22 at 11:15
The thing is if there is something written in the input value, then should be checked whether the string contains any of the symbols if so then write "can't have symbols in the string" if not then write "works" — Ali Sherifov, Jan 05 '22 at 11:18
I am relatively new to JS and programming in general. That's home project, I am not creating it for a company. The thing is I don't understand why doesn't the compiler check the if statements in order. When I don't write anything in the input it works fine. However when I write something in it it doesn't check for a symbols, it directly displays "vbvnv" — Ali Sherifov, Jan 05 '22 at 11:35

mplungjan · Answer 1 · 2022-01-05T11:37:43.250

You likely MEANT to do this

I do not however recommend to block people from entering special characters.

What about Marie-Louise and Jean-Jacques?

const re = /[^a-zA-Z]/g
const validName = (fld, name) =>   {
  const val = fld.value.trim();
  let error = "";
  if (val === "") {
    error = `Please enter ${name}`; 
  } else if (re.test(val)) {
    error = `You can't use symbols and/or numbers in ${name}`
  }
  fld.nextSibling.textContent = error ? error : "OK";
  return error === "";
};
document.getElementById("signInForm").addEventListener('submit', (e) => {
  const signInFirstName = this.firstName;
  if (!validName(signInFirstName,"your first name")) e.preventDefault(); // cancel submit
  const signInLastName = this.lastName;
  if (!validName(signInLastName,"your last name")) e.preventDefault(); // cancel submit
})

<form id="signInForm">
  <label>First name: <input id="firstName" name="firstName" type="text"><span class="error"></span></label><br/>
  <label>Last name: <input id="lastName" name="lastName" type="text"><span class="error"></span></label><br/>
  <input type="submit" />
</form>

Why my if statements don't work properly?

1 Answers1