¿Cómo puedo validar la entrada de un datalist html5?

Solución:

Prueba esto:

<input type="text" list="colours" id="txt'>

Y en el envío del formulario puede verificar:

var val = $("#txt").val();

var obj = $("#colours").find("option[value="" + val + ""]");

if(obj != null && obj.length > 0)
    alert("valid");  // allow form submission
else
    alert("invalid"); // don't allow form submission

Me gustaría compartir una alternativa que no sea jquery, solo en Js:

function is_valid_datalist_value(idDataList, inputValue) {
  var option = document.querySelector("#" + idDataList + " option[value="" + inputValue + ""]");
  if (option != null) {
    return option.value.length > 0;
  }
  return false;
}

function doValidate() {
  if (is_valid_datalist_value('colours', document.getElementById('color').value)) {
    alert("Valid");
  } else {
    alert("Invalid");
  }
}

<form onsubmit="return false">
  <input type="text" id="color" list="colours">
  <datalist id="colours">
    <option value="Red" data-id="1" />
    <option value="Blue" data-id="2" />
    <option value="Green" data-id="3" />
    <option value="Black" data-id="4" />
    <option value="White" data-id="5" />
    </datalist>
  <button onclick="doValidate();">Send</button>
</form>

Si utiliza jQuery método de búsqueda, atravesará el DOM tree tratando de encontrar el elemento correcto teniendo en cuenta el valor de uno de sus atributos, y mirando tu comentario, creo que te preocupa el rendimiento.

Su primera idea sobre iterar sobre todas las opciones y verificar la propiedad de valor es mejor (hablando de rendimiento) que atravesar el DOM árbol buscando un elemento con un valor particular en uno de sus atributos (mira esta comparación). Debes ser consciente de que código más corto no es lo mismo que código más rápido.

Una solución más rápida es generar un array de cadenas al principio y busque el valor correcto dentro de él en el proceso de validación:

//---At the beginning of your application
let list = Array.prototype.map.call(document.getElementById("colours").options, (option) => option.value);

//---Later in your validation process
if (list.indexOf(value) < 0) {
    //Invalid
}

Otra solución más rápida es generar un object al principio y utilícelo como un mapa hash, verificando el valor correcto dentro de él en el proceso de validación:

//---At the beginning of your application
let hashmap = Array.prototype.reduce.call(document.getElementById("colours").options, (obj, option) => {
    if (!obj[option.value]) { obj[option.value] = true; }
    return obj;
}, {});

//---Later in your validation process
if (!hashmap[value]) {
    //Invalid
}

Aquí tienes los cuatro métodos comparados en medida que:

1 – Su primera idea (iterar sobre todos los Datalist opciones)

2 – Utilice el jQuery método de búsqueda (@nsthethunderbolt solution)

3 – Crea un array de strings al principio y busque el valor en el Array en el proceso de validación

4 – Cree un mapa hash al principio y verifique si el valor es true en el proceso de validación

https://www.measurethat.net/Benchmarks/Show/4430/0/search-an-option-inside-a-datalist

---

---

Utiliza Nuestro Buscador