Skip to main content
Se quito funcion innesesaria
Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23

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>

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>

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:

$(document).ready(function () {
    $('#form').submit(e => {
        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>

Origen Enlace
Juan Rivera
  • 1.5k
  • 9
  • 23

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>