Solamente valida el resultado del input
con los values
del datalist
, lo estoy seleccionando con JQuery para tomar el value
y si es que hay me retorna un valor, si no, me retorna vacio, entonces con esto validas en el submit
let datalist_val = $("#list option[value='"+inputValue+"']").text();
if ( datalist_val === '' ) { alert ('No esta este valor en el datalist') }
Codigo completo:
function getExistingValues(dataListId) { // Optiene los valores existentes del datalist
const optionInputs = document.getElementById(dataListId).children;
let values = [];
for (const childrenValue of optionInputs) {
values.push(childrenValue.innerHTML);
}
return values;
}
$(document).ready(function () {
$('#form').submit(e => {
let EXISTING_VALUES = getExistingValues('list');
const inputValue = $('#input').val();
let datalist_val = $("#list option[value='"+inputValue+"']").text();
if ( datalist_val === '' ) {
e.preventDefault();
alert('No esta este valor en el datalist');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackOverflow example</title>
</head>
<body>
<form action="#" id="form" autocomplete="off">
<input type="text" list="list" id="input">
<datalist id="list">
<option id="op1" value="Internet Explorer" >Internet</option>
<option id="op2" value="Firefox" >Firefox</option>
<option id="op3" value="Chrome" >Chrome</option>
<option id="op4" value="Opera" >Opera</option>
<option id="op5" value="Safari" >Safari</option>
</datalist>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>