HTML Input与DataList值校验问题：输入不在列表仍可提交

需求：校验输入框中的值是否存在于datalist选项中，若不存在则阻止表单提交并提示用户。
问题：输入不在列表内的值（例如productD）时，表单仍能提交，排查代码遗漏点。

测试代码如下：

<tbody>
    <div class="fichetechniquediv">
        <form action="{% url 'createdfichetechnique' %}" method='post' onclick="return myCheckFunction(this)">
            <h1>Create the technical Sheet</h1>
            <br><br>
            <div class="divlot">
                <label for="lot">Enter your Lot:</label>
                <input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()">
            </div>
            <br><br>
            <div class="divproduct">
                <label for="productlist">Enter or Select Product:</label>
                <input type="text" name="Product" id="productlist" list="productslist" label="'Enter or Select your Product:">
                <datalist id="productslist">
                        <option value="productA">productA</option>
                        <option value="productB">productB</option>
                        <option value="productC">productC</option>
                </datalist>
            </div>
            <br><br>
            <input class="buttonsave" type="submit" value="Create" name="submit">
        </form>
    </div>
</tbody>

<script>
    function myCheckFunction(form) {
    var list = document.getElementsById("productslist");// get the values that are currently under the datalist tag in option tags
    var val = document.getElementsByName("Product");// get the user input
    if( list.include(val)){  // compare the options with the user input
      submit(form)}// if one is equal with the user input submit the form with the method submit();
    else{
        return false// else don't submit the form, the user will have to change his input
    }
    }
</script>

• 表单事件绑定错误：表单用了onclick事件，这会在点击表单任意区域时触发，而非仅在提交时。正确应该绑定onsubmit事件，这样才能在表单提交前拦截验证。
• DOM元素获取错误：
  • document.getElementsById拼写错误，正确方法是document.getElementById（无末尾的s）；
  • document.getElementsByName("Product")返回的是元素集合，无法直接获取输入值，应该通过输入框的idproductlist获取值：document.getElementById("productlist").value。
• 验证逻辑错误：
  • list.include(val)存在两处错误：一是方法名应为includes，二是list是datalist元素，不是选项值数组，需要先提取所有option的value组成数组再做判断；
  • 原代码中手动调用submit(form)会绕过表单的默认提交拦截逻辑，正确做法是验证通过时返回true，由表单自行提交。
• 缺少用户提示：未添加错误提示，用户无法知道为何表单不提交。

<tbody>
    <div class="fichetechniquediv">
        <!-- 把onclick改为onsubmit -->
        <form action="{% url 'createdfichetechnique' %}" method='post' onsubmit="return myCheckFunction(this)">
            <h1>Create the technical Sheet</h1>
            <br><br>
            <div class="divlot">
                <label for="lot">Enter your Lot:</label>
                <input type="text" id="lot" name="lot" required minlength="7" oninput="this.value = this.value.toUpperCase()">
            </div>
            <br><br>
            <div class="divproduct">
                <label for="productlist">Enter or Select Product:</label>
                <input type="text" name="Product" id="productlist" list="productslist" label="Enter or Select your Product:">
                <datalist id="productslist">
                        <option value="productA">productA</option>
                        <option value="productB">productB</option>
                        <option value="productC">productC</option>
                </datalist>
            </div>
            <br><br>
            <input class="buttonsave" type="submit" value="Create" name="submit">
        </form>
    </div>
</tbody>

<script>
    function myCheckFunction(form) {
        // 获取datalist下所有option元素
        const options = document.getElementById("productslist").getElementsByTagName("option");
        // 提取所有option的value组成数组
        const validValues = Array.from(options).map(opt => opt.value);
        // 获取输入框的实际值
        const inputVal = document.getElementById("productlist").value.trim();
        
        if (validValues.includes(inputVal)) {
            // 验证通过，允许表单提交
            return true;
        } else {
            // 验证失败，提示用户并阻止提交
            alert("请输入或选择列表中的产品");
            return false;
        }
    }
</script>

内容的提问来源于stack exchange，提问作者SumLyfe