即使 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">