Django中的Javascript验证

Question

我在我的Django应用程序中有一个过滤选项。这个过滤是通过下拉菜单中选择的选项（比如姓名、地点、职位、员工编号等等）和在文本框中输入的值来完成的。现在我想要验证一下，当用户从下拉菜单中选择员工编号时，如果在文本框中没有输入任何值，那么表单就不应该提交，并且应该弹出提示让用户输入一些文本。我写了一个JavaScript函数来检查这个字段是否为空，但它的效果并没有我想的那样。我会把我的代码贴在这里。

<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函数，表单还是会被提交。else条件在所有流程中都在起作用。有没有人能帮我看看这个问题，给我一个解决方案？如果需要我提供更多的说明，请留言。任何帮助我都非常感激。

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>