为什么ID在表单中有两个选择框时不被接受

Why ID is not taking while two selection boxes in the form?

本文关键字：选择 两个 表单 ID 为什么      更新时间：2023-09-26

我在下面的表单列表中有两个选择框，它们都有不同的id"language"answers"time"。现在的问题是我的脚本没有正确显示错误。我把边框颜色显示错误。有人能帮我吗？

<div class="field_wrap">
  <select name="language" id="language" onblur="validateSelect(language)" class="select_promo">
    <option value="0" disabled selected>Prefered Language</option>
    <option value="1">English</option>
    <option value="2">Hindi</option>
    <option value="3">Tamil</option>
    <option value="4">Malayalam</option>
  </select></div>
<div class="field_wrap">
  <select name="time" id="time" onblur="validateSelect(time)" class="select_promo">
    <option value="0" disabled selected>Time to Contact</option>
    <option value="1">8 - 10 AM</option>
    <option value="2">10 - 12 AM</option>
    <option value="3">12 - 2 PM</option>
    <option value="4">2 - 5 PM</option>
    <option value="5">5 - 8 PM</option>
  </select></div>
</div>

我的脚本：

function validateSelect(language) { 
  var myValue = document.getElementById('language').value;
  if(myValue > 0) {
    document.getElementById('language').style.borderColor ='#80c75a';
    document.getElementById('languageError').style.display = "none";
    return true;
  } else {
    document.getElementById('language').style.borderColor ='#e35152';
    return false;
  }
}
function validateSelect(time) { 
  var myValue = document.getElementById('time').value;
  if(myValue > 0) {
    document.getElementById('time').style.borderColor ='#80c75a';
    document.getElementById('timeError').style.display = "none";
    return true;
  } else {
    document.getElementById('time').style.borderColor ='#e35152';
    return false;
  }
}
// Validate Select
if (!validateSelect(document.getElementById('language'))) {
  document.getElementById('languageError').style.display = "block";
  error++;
}
if (!validateSelect(document.getElementById('time'))) {
  document.getElementById('timeError').style.display = "block";
  error++;
}

您的代码中有一些错误：

  1. 您声明函数validateSelect两次
  2. 在那里传递一个元素，而函数中需要一个元素id
  3. 选择中的onblur事件处理程序应接受引号中的参数

以下是您的javascript应该是什么样子：

function validateSelect(id){ 
  var el = document.getElementById(id),
      myValue = el.value;
  if(myValue > 0){
    el.style.borderColor ='#80c75a';
    document.getElementById(id+'Error').style.display = "none";
     return true;
  }else{
    el.style.borderColor ='#e35152';
    return false;
  }
}
// Validate Select
validateSelect('time');
validateSelect('language');

你的onblur应该看起来像：

onblur="validateSelect('language')"和onblur="validateSelect('time')"

检查小提琴：JS fiddle

相关文章：