Django Javascript驗證錯誤

Question

我在我的Django應用程序中有一個過濾選項。過濾通過下拉列表中選擇的選項（名稱，位置，指定，EmployeeID，..等）完成，並在文本字段中輸入值。現在我想驗證用戶何時從下拉選項中選擇EmployeeID。如果在選擇EmployeeID時沒有在文本框中輸入任何值，則不應提交表單，並且應顯示警報以輸入一些文本。我創建了一個用於檢查字段是否爲空的js函數，但它沒有按照我想要的方式工作。我會在這裏粘貼我的代碼。

<form name="myform" id="myformid" method="POST" > 

    Filter By: 
    <select name="choices" id ="choicesId" style="color: black; background-color: #BDBDBD" > 

     <option value="Name">Name</option> 
     <option value="Designation" >Designation</option> 
     <option value="EmployeeID" id="empid">EmployeeID</option> 
     <option value="Project" >Project</option> 
     <option value="DateOfJoin" >Date Of Join</option> 
     <option value="location" >Location</option> 
     <option value="email">Email</option>  
     <option value="skills">Skills</option> 
    </select> 
    <input id="textField "type="text" name="textField" style="color: black; background-color: #BDBDBD" > 
    <input type="button" value="Go" onclick="isEmpty();"> 
    </form> 

    <table id="employeeTable" class="tablesorter"> 
    <thead><tr><th>Employee List <!-- <input type="image" src="/static/sort_asc.gif " height="12" name="sortAscend"> --> </th></tr></thead> <br> 
    <tbody> 
    {%for emp in emp_list.object_list%} 
     <tr> 
      <td><a STYLE="text-decoration:none" href ="http://10.1.0.90:8080/singleEmployee/{{emp.id}} "> {{ emp.userName }} </a></td> 
     </tr> 
    {%endfor%} 
    </tbody> 
    </table></h4> 
    </div><br><br> 
    <a STYLE="text-decoration:none" href="http://10.1.0.90:8080/createEmployee/ ">Create New Employee </a> 

    <script type="text/javascript"> 
    function isEmpty(){ 
     if ((document.myform.choices.selectedIndex.value=='')) 

      { 
      alert(document.myform.choices.options[document.myform.choices.selectedIndex].id); 
      alert("Hi"); 
      document.myform.choices.focus(); 
      /*document.getElementById('employeeIDfield').innerHTML = 'Please fill this field';*/ 
      return true; 
      } 
     else 
      { 
      alert("Data entered"); 
      document.getElementById('myformid').action = "http://10.1.0.90:8080/filter/"; 
      document.getElementById('myformid').submit(); 
      return false; 
      } 
    } 
    </script> 

我能理解的是即使在輸入javascript函數後，表單仍然會被提交。其他條件適用於所有過程。有人可以研究這個問題並給我一個解決方案嗎？請給我一個更清晰的評論，我應該給。任何幫助，將不勝感激

Answer 1

檢查你的代碼，如果我正確地理解你的問題，你要做到這一點：

<form name="myform" id="myformid" method="POST" action="http://10.1.0.90:8080/filter/" onSubmit="javascript:return isEmpty();" > 

Filter By: 
<select name="choices" id ="choicesId" style="color: black; background-color: #BDBDBD" > 

    <option value="Name">Name</option> 
    <option value="Designation" >Designation</option> 
    <option value="EmployeeID" id="empid">EmployeeID</option> 
    <option value="Project" >Project</option> 
    <option value="DateOfJoin" >Date Of Join</option> 
    <option value="location" >Location</option> 
    <option value="email">Email</option>  
    <option value="skills">Skills</option> 
</select> 
<input id="textField" type="text" name="textField" style="color: black; background-color: #BDBDBD" value=""/> 
<input type="submit" value="Go"/> 
</form> 

<table id="employeeTable" class="tablesorter"> 
<thead><tr><th>Employee List <!-- <input type="image" src="/static/sort_asc.gif " height="12" name="sortAscend"> --> </th></tr></thead> <br> 
<tbody> 
{%for emp in emp_list.object_list%} 
    <tr> 
     <td><a STYLE="text-decoration:none" href ="http://10.1.0.90:8080/singleEmployee/{{emp.id}} "> {{ emp.userName }} </a></td> 
    </tr> 
{%endfor%} 
</tbody> 
</table></h4> 
</div><br><br> 
<a STYLE="text-decoration:none" href="http://10.1.0.90:8080/createEmployee/ ">Create New Employee </a> 

<script type="text/javascript"> 
function isEmpty(){ 
    var my_select = document.myform.choices; 
    var selected_index = my_select.selectedIndex; 
    var my_textfield = document.getElementById('textField'); 
    if ((my_select[selected_index].value == 'EmployeeID') && ((my_textfield.value=='') || (my_textfield.value==null))) { 
     alert("Enter employee ID!"); 
     my_textfield.focus(); 
     return false; 
    } 
    else{ 
     alert("Data entered"); 
     return true; 
    } 
} 
</script>