HTML js how to check if name exists in list ignoring case and to stop form submission-CodePudding

I have a form with an input field for the username to check if the field is empty and to check if what the user entered exists on a list.

This half works as in the messages appear when invalid however the form still submits if the user enters a name that exists in the list where as the form does not submit when the field is blank (but this is due to the input required tag being present).

Also if the user enters a name that exists in the list but with different case letters the message 'The name already exists' does not appear as it does not match the case of the name in the list.

Please see my code below:

<script>
function usernameFunction() {
  let x = document.getElementsByName("username")[0].value;
  let listNames = ["john", "sid", "paul", "jim"];

  let text;
  text = "";
  if (x === '' ||  x == null) {
    text = "Username cannot be blank";
  }
    for (let i = 0; i < listNames.length; i  ) {
    if (listNames[i] === x) {
      text = ('The name already exists')
    }
  }

  document.getElementById("username_errors").innerHTML = text;
}
document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();

    document.getElementsByName("username").focus();

  };
})(), true);
</script>

<form method="POST" action="">
<input type="text" name="username"  placeholder="username" name  required>
<div  id="username_errors"></div>
      <input  type="submit" value="Save" name="save_username" onclick="usernameFunction()">
</form>

How can I adapt my code to stop submission of the form when the name exists in the list and ignoring the case? - for example - john being in the list if the user enters John, I would like the message 'The name already exists' to still appear and to not submit.

Thanks in advance

CodePudding user response：

This would be the line for you:

 if ( listNames.includes(x.toLowerCase()) ) {
    return false;
  }

It check if the value John is included in the array of names. And the String Function toLowerCase() make morph the name to lowercase.

UPDATE

function usernameFunction(e) {
  e.preventDefault();
  
  let text = '';
  let x = document.getElementsByName("username")[0].value;
  let listNames = ["john", "sid", "paul", "jim"];
  if ( listNames.includes(x.toLowerCase()) ) {
    text = x   ' allready taken.';    
  }
  if (x === '' ||  x == null) {
    text = "Username cannot be blank";
  }
  
  if (text.length > 0) {
    document.getElementById("username_errors").innerHTML = text;  
    return false;
  }
  // trigger Submit programmatically
  document.getElementById("myForm").submit(); 
  console.log('trigger submit')  
}

document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();

    document.getElementsByName("username").focus();

  };
})(), true);

<form method="POST" id="myForm">
<input type="text" name="username" value="John" placeholder="username" name  required>
<div  id="username_errors"></div>
<button  onclick="usernameFunction(event)">SUBMIT</button>
</form>

CodePudding user response：

You can use toUpperCase() for this.

if (listNames[i].toUpperCase() === x.toUpperCase())
 {
  text = ('The name already exists')
}