即使验证返回false,表单仍然提交

Form still submits even though validation returns false

本文关键字:表单 提交 false 验证 返回      更新时间:2023-09-26

当我使用通用警报框时,表单验证工作正常,但如果我试图使用JQuery脚本使警报框看起来很漂亮,则表单会验证并提交,尽管返回的值为false

工作的标准报警框

function validate(){
    if( document.audit_form.audit_name.value == "" )
       {
         alert( "Please select a name for your audit" );
         document.audit_form.audit_type.focus() ;
         return false;
     }
return true;
}

尝试使用codecanyon 中的jQuery MsgBox

function validate(){
    if( document.audit_form.audit_name.value == "" )
       {
         $.msgbox("Please select an audit type", 
                    {
                        type:"alert",
                        buttons: [
                            {type: "submit", value: "Ok"}
                        ]
                    },
                    function(result){
                    if (result && result=='Ok'){
                        return false;
                    }
            });
       }
return true();
}

使用Apprise 进行第二次尝试

function validate(){
    if( document.audit_form.audit_name.value == "" )
       {
         apprise('Please enter a name for your audit?', {'textOk' : 'Ok',}, function(r) {
            if(r) { 
                return( true );
            } else { 
                return (false);
            }
        });
       }
}

在这三种情况下,警报框都会在应该显示的时候显示,但对于JQuery版本,表单仍然会提交。使用调用函数

 <form id="audit_form" name="audit_form" method="post" enctype="multipart/form-data" 
action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return validate();">

$.msgboxapprise都不是阻塞函数,并且结果在函数回调之前返回,您应该更改逻辑。基本上,你提交的表格应该是这样的:

$('#audit_form').submit(function(event){
     event.preventDefault();
     yourUIAlertFunction(..., ..., function(isSuccess){
          if(isSuccess){
              submitFormLogic();
          } else {
              hideAlertAndShowErrors();
          }
     });
});