Javascript 下拉菜单验证

Question

好的，我有一个由 PHP 动态生成并填充了从数据库中获取的数据的下拉菜单。从正面看，这很好用，我遇到的问题是 JS 验证，对 JavaScript 不太好（“不喜欢它”），但出于我的迷你项目的目的，无论如何我都必须使用它......

问题在于，使用 JS，我正在检查用户是否选择了下拉菜单中可用的选项之一，以便可以提交表单，否则会显示警告。

所以我想要做的是......给第一个选项设置一个 value="f" 显示“请选择研讨会”所以如果在提交表单时这个下拉菜单的值== f 返回 false 否则提交表单。

现在，如果在提交时值 ==f 会显示错误，但如果值不是 == f 并且我从下拉菜单中选择其中一个值，我将无法继续提交，它不允许我

PHP 代码：

function getForex($link){
$timestamp = date("Y-m-d");

    $sql = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Forex%' OR  course LIKE '%forex%' AND status=5";
    $query = mysqli_query($link, $sql);
        $option='<select id="Forex" name="workshop">';
        $option.='<option id="fx" value="Forex">Select Forex Workshop</option>';
        $option.='';
            while($result = mysqli_fetch_assoc($query))
            {
                if($timestamp < $result['endingDate'])
                {
                    $option.='<option id="'.$result['id'].'" value='.$result['endingDate'].'>'.$result['course']." ".$result['schedule'].'</option>';   
                }
            }
            $option.='</select>';
            return $option;             
    }

JS代码：

  var sel=document.getElementById('fx').value="Forex";
  if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('fx').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('fx').style.borderColor = "green";
 }

好吧，伙计们结合了许多非常有用的答案，但是当我添加另一个下拉菜单时，例如

PHP 代码：

function getBinary($link){
$timestamp = date("Y-m-d");

    $sql2 = "SELECT id, course, status, endingDate, schedule FROM courses WHERE course LIKE '%Binary%' OR course LIKE '%binary%' AND status=5";
    $query2 = mysqli_query($link, $sql2);
        $option2='<select id="Binary" name="workshop">';
        $option2.='<option id="bi" value="Binary">Select Binary Workshop</option>';
        $option2.='';
            while($result2 = mysqli_fetch_assoc($query2))
            {
                if($timestamp < $result2['endingDate'])
                {
                    $option2.='<option id="'.$result2['id'].'" value="'.$result2['endingDate'].'">'.$result2['course']." ".$result2['schedule'].'</option>';
                }
            }
            $option2.='</select>';
            return $option2;
}

JS代码：

  var selbi=document.getElementById('Binary').value;
  if(selbi.match("Binary")){
      document.getElementById('error').innerHTML = "Choose Binary Workshop Date";
      return false;
 }

问题变成了内部 HTML 消息仅针对外汇显示并且被扭曲，即如果未选择外汇，它会显示消息选择外汇研讨会如果我选择外汇研讨会然后显示选择二进制研讨会：D

Answer 1

你没有使用 select id 使用 select id

var sel=document.getElementById('Forex').value;
  if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('fx').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('fx').style.borderColor = "green";
 }

Answer 2

我已经完成了 javaScript 下拉验证。当下拉值是“选择一个”时，给你消息“请选择你的值”。我在 github 上的洞项目。项目链接 是Javascript drop-down value validation

Answer 3

您必须使用下拉 ID 'Forex' 来获取下拉列表的选定值而不是选项 ID，如下所示

var sel = document.getElementById('Forex').value;

Answer 4

HTML 代码

<form id="send" name="myfrom" action="confrimationPage.php" method="POST" onsubmit="return validateForm(this);" >

                <p>
                    <label for="company">Gender</label>
                    <select id="gender" name="gender">
                        <option value="Select One">Select One</option>
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                </p>

                <p>
                    <label for="country">Postal Code</label>
                    <input id="Country" type="text" name="postalCode"  />
                </p>

                <p>
                    <button id="submit" type="submit">Submit</button>
                </p>

            </form>

*JavaScript *

  <script type="text/javascript">

function validateForm(form)
{
    // Gender empty or not
    var selectGender=document.getElementById('gender').value;
    if(selectGender=="Select One")
    {
        alert("Please Select gender");
        return false;   
    }
    //Postal code empty or not
    if(form.postalCode.value=="")
    {
        alert("Filled the Postal Code Field");
        form.postalCode.focus();
        return false;
    }
}

</script>

Answer 5

Check It


 var sel=document.getElementById('Forex').value;
 var binary=document.getElementById('Binary').value; 



if(sel.match("Forex")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('Forex').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('error').innerHTML = "";
     document.getElementById('Forex').style.borderColor = "green";
 }
if(binary.match("Binary")){
      document.getElementById('error').innerHTML = "Choose Forex Workshop Date";
      document.getElementById('Binary').style.borderColor = "red";
      return false;
 }else{
     document.getElementById('error').innerHTML = "";
     document.getElementById('Binary').style.borderColor = "green";
 }