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

Question

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

但是，由于 PHP 脚本处理（上传图像等）需要时间，我正在尝试使用相同的 onSubmit 函数在通过验证时显示 "please wait" 通知。或者，还有更好的方法？我在 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

在您的 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();

Answer 2

您需要做的就是将“...请稍候...”元素隐藏在文档中，然后在提交时显示它。您可以通过将 CSS class 应用到 HTML 中的元素来执行此操作，该元素最初会隐藏它，然后在表单有效时删除 class。

几个旁注...

不要使用内联 HTML 事件属性（onsubmit、onclick 等）。这就是 20 年前事件的注册方式 and there are many drawbacks to using them. Unfortunately, because most people just copy what others have done, the use of this approach just will not die. Instead, follow modern standards and use .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>

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

onSubmit Adding a Second Javascript Action After Form Validation

javascript

php

jquery

validation

onsubmit