Form gets submited even though JS function is returning false

Question

Below is a code snippet I took from the html source:

<FORM id=SubmitLogon method=post name=submitLogonForm action=/MyLogin/SubmitLogon.do;jsessionid=reQYQqPCZt_6Oc3EkU66XFiC-fWQQ2DHPdCgWYwR5TbT9xsXOsPe!907086402 AutoComplete="off">



    <TR>
        <TD class=logonLabelTdTag>Username&nbsp; </TD>
        <TD align=left>
            <DIV id=wwgrp_username_Id class=wwgrp>
                <DIV id=wwctrl_username_Id class=wwctrl>
                    <INPUT onchange="javascript: this.value=this.value.toUpperCase();" tabIndex=1 onfocus="javascript: this.value=this.value.toUpperCase();" id=username_Id class=logonTextBox maxLength=40 name=username>
                    </DIV>
                </DIV>
            </TD>
        </TR>


        <TR>
            <SCRIPT language=JavaScript1.2 type=text/javascript>
                       $(document).ready(function () {
                    try {
                       $("input[type='text']").each(function(){
                           $(this).attr("autocomplete","off");
                        });
                       }
                   catch (e)
                   { }
                  });
            </SCRIPT>

            <TD class=logonLabelTdTag>Password&nbsp; </TD>
            <TD align=left>
                <DIV id=wwgrp_password_Id class=wwgrp>
                    <DIV id=wwctrl_password_Id class=wwctrl>
                        <INPUT tabIndex=2 id=password_Id class=logonTextBox maxLength=40 type=password value="" name=password>
                        </DIV>
                    </DIV>
                </TD>
            </TR>



            <TR>
                <TD colSpan=2 align=right>
                    <BUTTON onclick=validateLoginCredentials() style="BORDER-TOP-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 39px; WIDTH: 98px; BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-BOTTOM-STYLE: none; BORDER-RIGHT-STYLE: none" type=submit value="Loginn">
                        <IMG src="https://den02qoj.us.oracle.com/images/btn_login.jpg">
                        </BUTTON>
                    </TD>
                </TR>


            </FORM>

<script>
                function validateLoginCredentials(){
                    alert('invoked');
                    
                    var usernameVar = document.getElementById("username_Id").value;
                    var passwordVar = document.getElementById("password_Id").value;
                    //validationIdd_user
                    //validationIdd_password
                    
                    alert('usernameVar is:'+usernameVar);
                    alert('passwordVar is:'+passwordVar);
                    
                    alert('usernameVar length is:- '+usernameVar.length);
                    alert('passwordVar length is:- '+passwordVar.length);
                    
                    document.getElementById("validationIdd").style.visibility = 'hidden';
                    document.getElementById("validationIdd_user").style.visibility = 'hidden';
                    document.getElementById("validationIdd_password").style.visibility = 'hidden';
                       
                    if(usernameVar == '' && passwordVar == ''){
                        document.getElementById("validationIdd").style.display='';
                        alert('517-false');
                        return false;
                    }else if(usernameVar == '' || usernameVar == null){
                        document.getElementById("validationIdd").style.visibility = 'hidden';
                        document.getElementById("validationIdd_password").style.visibility = 'hidden';
                        document.getElementById("validationIdd_user").style.display='';
                        alert('523-false');
                        return false;
                    }else if(passwordVar == '' || passwordVar == null){
                        document.getElementById("validationIdd_password").style.display='';
                        alert('527-false');
                        return false;
                    }else{
                        alert('530-true submitting now----------------');
                        document.getElementById('SubmitLogon').submit() 
                        return true;   
                    }
                    alert('validateLoginCredentials:end');
                }
            </script>

First time click on submit button
When username(id:username_Id) and password(id:password_Id) both are empty the JS function validateLoginCredentials() it returned false this I verified by alert('517-false'); but form got submitted.

Again when I click on submit button for the second time
username(id:username_Id) and password(id:password_Id) both are empty the JS function validateLoginCredentials() is invoked but its not entering into the below block (which was the first scenario which I described above).

if(usernameVar == '' && passwordVar == ''){
                        document.getElementById("validationIdd").style.display='';
                        alert('517-false');
                        return false;
                    }

Why there is different results for the same (above) scenarios and why form got submitted in first scenario even though JS function returned false?

Please help me out.

Answer 1

您必须将检查功能放在表单标签中，而不是放在按钮中

<FORM id=SubmitLogon method=post onsubmit="return validateLoginCredentials()" name=submitLogonForm action=/MyLogin/SubmitLogon.do;jsessionid=reQYQqPCZt_6Oc3EkU66XFiC-fWQQ2DHPdCgWYwR5TbT9xsXOsPe!907086402 AutoComplete="off">