即使 JS 函數返回 false，表單也會被提交

Question

下面是我從 html 源代碼中獲取的代碼片段：

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

第一次點擊提交按鈕
當username(id:username_Id)和password(id:password_Id)都為空時，JS 函數validateLoginCredentials()返回 false 這我通過alert('517-false'); 但表格已提交。

再次當我第二次點擊提交按鈕時
username(id:username_Id)和password(id:password_Id)都是空的 JS 函數validateLoginCredentials()被調用但它沒有進入下面的塊（這是我上面描述的第一個場景）。

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

為什么相同（以上）場景有不同的結果，為什么即使 JS 函數返回 false，表單也會在第一個場景中提交？

請幫幫我。

Answer 1

您必須將檢查功能放在表單標簽中，而不是放在按鈕中

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