I created a function that checks if the username already exists in the data list, but alert shows every time even if the username isn't in duplicate data list.

<form onsubmit="return validation()">
    <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" id="user" name="user"></td>
                <datalist id="list">
                    <option value="Tilen">
                    <option value="Marko">
                    <option value="Teja">
                    <option value="Tisa">
                    <option value="Rok">
                    <option value="Luka">
                    <option value="Mojca">
                </datalist>
            </tr>
    </table>
</form>

<script>
   function validation(){
       var user = document.getElementById("user");
            if(user.value.length <= 20 && user.value.length >= 3){
            }
            else{
                alert("Username has to be between 3-20 characters.")
             }
            //duplication data list
            var user = document.getElementById("user");
            if(user.value == list.value){
            }
            else{
                alert("Username already exists.")
             }
   }
</script>

I created a function that checks if the username already exists in the data list, but alert shows every time even if the username isn't in duplicate data list.

<form onsubmit="return validation()">
    <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" id="user" name="user"></td>
                <datalist id="list">
                    <option value="Tilen">
                    <option value="Marko">
                    <option value="Teja">
                    <option value="Tisa">
                    <option value="Rok">
                    <option value="Luka">
                    <option value="Mojca">
                </datalist>
            </tr>
    </table>
</form>

<script>
   function validation(){
       var user = document.getElementById("user");
            if(user.value.length <= 20 && user.value.length >= 3){
            }
            else{
                alert("Username has to be between 3-20 characters.")
             }
            //duplication data list
            var user = document.getElementById("user");
            if(user.value == list.value){
            }
            else{
                alert("Username already exists.")
             }
   }
</script>

• javascript
• html

• 1 where do you populate the list variable in the function? – Jhecht Commented Dec 11, 2018 at 1:09
• @Jhecht oh my bad, do I have to make variable for list "var list = document.getElementById("list");" too right? – NenaPece Commented Dec 11, 2018 at 1:14
• Agreed with the above ment. You first need to get "list" like you do with the "user" field. Then you need to see if user.value is contained in "list", not that it equals "list". – Doug F Commented Dec 11, 2018 at 1:15
• you would need to populate list, but doing document.querySelector('list') would not do what you are expecting. I suggest you look up the Document Object Model before continuing. – Jhecht Commented Dec 11, 2018 at 1:18

2 Answers 2

You can get all the options using querySelector, iterate over them and pare then with user.value. Also you need list="polje_imen" in the input element.

function validacija() {

  let user = document.getElementById('user');
  let listOptions = document.querySelectorAll("#list option");


  if (user.value.length <= 20 && user.value.length >= 3) {} else {
    alert("Username has to be between 3-20 characters.")
  }


  for (let i = 0; i < listOptions.length; i++) {
    if (listOptions[i].value === user.value) {
      alert('The name already exist')
    }
  }
  return false;
}

<form onsubmit="return validacija()">
  <table>
    <tr>
      <td>Username:</td>
      <td><input type="text" id="user" name="user" list="list"></td>
      <datalist id="list">
                    <option value="Tilen">
                    <option value="Marko">
                    <option value="Teja">
                    <option value="Tisa">
                    <option value="Rok">
                    <option value="Luka">
                    <option value="Mojca">
                </datalist>
    </tr>
  </table>
</form>

Edit: If you do not want to show the datalist, just use javascript.

function validacija() {

  let user = document.getElementById('user');
  let listNames = ["Tilen","Marko","Teja","Tisa","Rok","Luka","Mojca"];


  if (user.value.length <= 20 && user.value.length >= 3) {} else {
    alert("Username has to be between 3-20 characters.")
  }


  for (let i = 0; i < listNames.length; i++) {
    if (listNames[i] === user.value) {
      alert('The name already exist')
    }
  }
  return false;
}

<form onsubmit="return validacija()">
  <table>
    <tr>
      <td>Username:</td>
      <td><input type="text" id="user" name="user"></td>
    </tr>
  </table>
</form>

Firstly, I don't think you're binding to the input on the datalist correctly. You can actually use the datalist as an autoplete for the input if you simply change your input to look like this:

<input type="text" id="upor_ime" name="upor_ime" list="polje_imen">

If you have that in there, it bees much more obvious if they choose a value that is not in the list or not from a visual perspective. Now when it es to validating it in javascript, if you still want to take it that far, you're going to have to break out your list of possible names into an array so you can check to see if the string you're entering in the input exists in the array of strings. Because you're trying to pare an array of strings to a string, using the == operator in an if statement will not work. Here's a possible solution:

<form onsubmit="return validacija()">
    <table>
            <tr>
                <td>Uporabniško ime:</td>
                <td><input type="text" id="upor_ime" name="upor_ime" list="polje_imen"></td>
                <datalist id="polje_imen"></datalist>
            </tr>
    </table>
</form>

<script>
  var names = ["Tilen", "Marko", "Teja", "Tisa", "Rok", "Luka", "Mojca"];
  var options = "";
  for (let name of names) {
    options += "<option value='" + name + "'>";
  }
    document.getElementById("polje_imen").innerHTML = options;
  function validacija(){
    var upor_ime = document.getElementById("upor_ime");
    if(upor_ime.value.length > 20 || upor_ime.value.length < 3){
      alert("Uporabniško ime mora imeti med 3-20 znakov.")
      return;
    }

    //duplication data list
    var polje_imen = document.getElementById("polje_imen");
    if(names.includes(upor_ime.value)) {
      alert("Uporabniško ime že obstaja.");
      return;
    } else{
      // success        
    }
  }
</script>

Here is a JSFiddle: http://jsfiddle/4f1hztr2/

Edit: I also changed around some of your if statement logic so that if the length of the item wasn't right it didn't continue executing the rest of the code.