时间戳

首页 > 解决方案 > 在提交表单之前使用 javascript 验证选择

javascript - 在提交表单之前使用 javascript 验证选择

问题描述

我正在尝试检查用户是否没有从选择选项列表中选择任何选项，然后通过跨度 ID 将错误消息传递给用户...否则提交表单...我想要可以检查空选择的 JavaScript 代码两个选择的索引选项。这是我的代码..

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
 <label for="exampleInputSelect1">Select Your Stage</label>
 <select  class="form-control" name="course" id="course">
      <option value=""></option>
      <option value="Education">Education</option>
      <option value="Information Technology">Information Technology</option>
     <option value=" Computer Science">Computer Science</option>
 </select>
 <span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
 </div><br/>
                                
<div class="form-group">
 <label for="exampleInputSelect2">Select Your Stage</label>
  <select type="password" class="form-control" name="stage" id="stage">
       <option value="Y1S1">Y1S1</option>
       <option value="Y1S2">Y1S2</option>
       <option value="Y2S1">Y2S1</option>
       <option value="Y2S2">Y2S2</option>
       <option value="Y3S1">Y3S1</option>
       <option value="Y3S2">Y3S2</option>
       <option value="Y4S1">Y4S1</option>
       <option value="Y4S2">Y4S2</option>

   </select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
  </div>
</form>
 <button onclick="Check()" class="btn btn-info">Submit</button>
<script>
function Check(){
   var c=document.getElementById("course");
    var s=document.getElementById("stage");
    if(c.options[c.selectedIndex].text==""){
        document.getElementById("course_err").innerHTML="You have to select a course";
    }else{
        alert("form is ready to submit");
    }
}

我正在尝试检查空选择和 pevent 提交，直到用户从选项列表中选择某些内容。我需要代码来同时进行两次选择，谢谢

标签： javascripthtml

解决方案

有一个错误的变量x，要更改为c：

function Check(){
   var c=document.getElementById("course");
    var s=document.getElementById("stage");
    if(c.options[c.selectedIndex].text==""){
        document.getElementById("course_err").innerHTML="You have to select a course";
    }else if(s.options[s.selectedIndex].text==""){
        document.getElementById("stage_err").innerHTML="You have to select a semester";
    } else {
        alert("form is ready to submit");
    }
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="" method="post">
 <label for="exampleInputSelect1">Select Your Stage</label>
 <select  class="form-control" name="course" id="course">
      <option value=""></option>
      <option value="Education">Education</option>
      <option value="Information Technology">Information Technology</option>
     <option value=" Computer Science">Computer Science</option>
 </select>
 <span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="course_err"></span>
 </div><br/>
                                
<div class="form-group">
 <label for="exampleInputSelect2">Select Your Stage</label>
  <select type="password" class="form-control" name="stage" id="stage">
       <option value="Y1S1">Y1S1</option>
       <option value="Y1S2">Y1S2</option>
       <option value="Y2S1">Y2S1</option>
       <option value="Y2S2">Y2S2</option>
       <option value="Y3S1">Y3S1</option>
       <option value="Y3S2">Y3S2</option>
       <option value="Y4S1">Y4S1</option>
       <option value="Y4S2">Y4S2</option>

   </select>
<span class="help-block" style="color:red;font-size:1em;font-family:Segoe UI" id="stage_err"></span>
  </div>
</form>
 <button onclick="Check()" class="btn btn-info">Submit</button>

推荐阅读