Validation with datalist

Question

I want to validate my input datalist so that it will only be submitted when one of the elements is selected from the list. If not submit then I want to give a red error message next to the input element so the user understands what he did wrong.

Example:

    <input  type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
           <select name="name"> 
              <option value="atown">atown</option> 
              <option value="btown">btown</option> 
              <option value="ctown">ctown</option> 
           </select> 
        </datalist> 
    </input>

I wonder if it is possible with datalist?

If anyone can help me, I would be very grateful.

edit: I want to validate the code, it should now if it is on of the options or not, or when nothing was inputed, more like this answer I found Datalist option validation required however it give a pop up window, and I do not now how to show next to the input only a error message.

Edit2: I must not use an additional library.

Possible duplicate of [cant get the value of a input with a datalist](https://stackoverflow.com/questions/18249758/cant-get-the-value-of-a-input-with-a-datalist) — Liam, Jun 01 '18 at 15:56
So you want to make sure one of the options you suggest is being selected? If that's the case, wouldn't a — Félix Paradis, Jun 02 '18 at 04:57

Félix Paradis · Accepted Answer · 2018-06-02T05:31:24.197

You could do it by comparing the input's value with those you want to allow, as I've done in the code snippet below, but I think a simple <select> would be more appropriate than an input with a datalist if you want to give users a restricted list of options.

let btn = document.getElementById("btnSend");
let form = document.getElementById("zeForm");
let input = document.getElementById("zeInput");
let msg = document.getElementById("msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.onclick = function() {
  let allGood = false;
  
  allowedValues.forEach(function(elm) {
    if(elm === input.value) {
       allGood = true;
       return;
    }
  })

  if(allGood) {
    msg.innerHTML = "Success!!";
    msg.style.color = "green";
    //form.submit();
  } else {
      msg.innerHTML = "This value is not accepted";
      msg.style.color = "red";
  }
    msg.style.display = "inline";

}

#msg {
  display: none;
}

#btnSend {
  display: block;
  margin-top:1rem;
}

<form id="zeForm">
    <input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
          <!-- notice the absence of a <select> here... -->
            <option value="atown">atown</option> 
            <option value="btown">btown</option> 
            <option value="ctown">ctown</option> 
        </datalist> 
    </input>
    <p id="msg"></p>
    <button id="btnSend" type="button">send</button>
  </form>

Thank you very much, it works almost perfectly, only if you press enter, then what you wrote disappears, why does that happen? — E.Wolfo, Jun 04 '18 at 12:59
Do you have an idea perhaps how i costomize the code so the validation will show itself after the user did an input but not yet send? — E.Wolfo, Jun 04 '18 at 14:40
haha no idea why 'enter' makes everything go away... But look at this question for instant validation ideas https://stackoverflow.com/questions/26946235/pure-javascript-listen-to-input-value-change — Félix Paradis, Jun 04 '18 at 22:16
Oh, actually I know why the form disapears when you press enter; pressing enter triggers a form submit and when a form is submitted the page reloads. — Félix Paradis, Jun 05 '18 at 12:42

Validation with datalist

1 Answers1

Linked