使用 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 函数后，表单仍然会被提交。 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>