需要数据列表

Question

我希望用户不能提交表单，除非他们从下拉列表datalist 中选择了一些内容，该下拉列表在他们输入时出现。如果他们只是随机输入内容，我不希望提交表单。

如果这不可能，更好的选择是在用户提交时检查输入的文本是否出现在数据列表中？

<form method="post">
    <input type="text" list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit" name="submit">
</form>

<?php 
if(isset($_POST['submit']
   // function to check if something from the datalist was clicked and NOT just typed
}else{
   echo'Select something from the datalist!';
}

虽然我可以根据需要设置datalist，但这很容易被绕过。

Answer 1

在 input 标记中使用required 与您的目标数据列表具有相同的 id 将检查强制用户输入内容。

<form method="post">
    <input type="text" list="browsers" required>
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit" name="submit">
</form>

<?php 
if(isset($_POST['submit']
   // function to check if something from the datalist was clicked and NOT just typed
}else{
   echo'Select something from the datalist!';
}

但是，它不会阻止用户提供未在下拉列表中列出的输入。这需要在提交前通过 Javascript 进行检查。

<form method="post" onsubmit="return myCheckFunction(this)>

  <!-- Your form items -->
  <!--------------------->

</form>

<script>
  myCheckFunction(form) {
    // get the values that are currently under the datalist tag in option tags
    // get the user input
    // compare the options with the user input
    // if one is equal with the user input submit the form with the method submit();
    // else don't submit the form, the user will have to change his input
  }
</script>

如果您希望对 js 有所帮助，我很乐意提供帮助。

Answer 2

如果您想使用服务器端验证，

<form method="post">
    <input type="text" list="browsers" name="items" required>
    <datalist id="browsers" >
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
    <input type="submit" name="submit">
</form>

<?php 
if(isset($_POST['submit']
   $check = array('Internet Explorer', 'Firefox', 'Chrome', 'Opera', 'Safari');

if(in_array($_POST['items'], $check)){
  // Code to be execute. 
} else{
   echo'Select something from the datalist!';
}

}else{
   echo'Select something from the datalist!';
}