Javascript validation with Django

I have a filtering option in my Django application. The filtering is done by the choice (Name, location, designation EmployeeID, ..etc) selected on a drop down and the value entered in a text field. Now I wanted to validate when the user chooses EmployeeID from the drop down choice. If no value is entered in text box while selecting EmployeeID, then the form should not be submitted, and alert should be shown to enter some text. I created a js function for checking the field is empty or not, but its not working the way I wanted. I will paste my code here.

<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" 开发者_Go百科>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>

What I could understand is the form is still getting submitted even after entering the Javascript function. The else condition is working for all process. Can somebody look into this problem and give me a solution? Please put a comment for any more clarity I should give. Any help would be appreciated.

Checked your code and if I understand your problem correctly, you want do that:

<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>