onSubmit 在表单验证后添加第二个 Javascript 操作

Question

我有一个表单，它在 PHP 中服务器端处理开始之前使用 javascript onSubmit 使用非常基本的输入验证。

但是，由于 PHP 脚本处理（上传图像等）所花费的时间，我尝试使用相同的 onSubmit 函数在通过验证时显示“请稍候”通知。或者，还有更好的方法？我在 PHP 中尝试过，但必须先完成处理，然后才能回显任何输出。我从其他 SO 帖子中尝试过的任何内容都会停止验证过程。

<form id="form" method="post" action="" onsubmit="return Validate(this)" autocomplete="off">

当前的 Javascript 示例

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        return true;
    }
}

CSS & HTML 等待通知（最初隐藏）

<style>
    #processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

</style>
<div id="processing">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>

任何帮助将不胜感激

Answer 1

您需要做的就是让“...请稍候...”元素已经存在于文档中，但隐藏起来，然后在提交时显示出来。为此，您可以将 CSS 类应用于 HTML 中的元素，该元素最初将其隐藏，然后在表单有效时删除该类。

一些旁注......

不要使用内联 HTML 事件属性（onsubmit、onclick 等）。这就是 20 年前事件的注册方式and there are many drawbacks to using them。不幸的是，因为大多数人只是复制别人所做的，所以使用这种方法是不会死的。相反，请遵循现代标准并使用 .addEventListener()。

此外，永远不要将元素或变量命名为 name，因为 name 是全局 window 对象的属性，使用该名称可能会导致代码出现问题。

// Get references to the DOM elements that your code will need
var frm = document.getElementById("form");
var wait = document.getElementById("processing");
var userName = document.getElementById("txtName");

frm.addEventListener("submit", validate);  // Set up events the modern, standards-based way

// All event handlers will automatically be passed a reference 
// to the event object for that event
function validate(evt) {
    var error = '';

    // Example Filed
    if(userName.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {
        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        evt.preventDefault();  // Stop the event

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        wait.classList.remove("hidden");  // Remove the hidden class
    }
}

#processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }
    
    #processing.hidden { display:none } /* This hides the message by default */

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

<form id="form" method="post" action="#" autocomplete="off">
  <input type="text" id="txtName">
  <input type="submit">
</form>
<div id="processing" class="hidden">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>

Answer 2

在您的 javascript 验证中，您可以通过显示一条简单的消息让用户知道图像正在加载。

<div class="loading" style="display:none;">Loadin ...</div>

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here

        // show the user the image is loading
        $('#form .loading').show();
        return true;
    }
}

加载后，您可以在收到服务器响应后删除该消息。

$('#form .loading').hide();