将表单 POST 提交到另一个页面，但在重定向之前验证并在验证失败时保持在同一页面上

Question

是否有一种 php 方法来验证在提交之前提交到另一个页面的表单，如果字段无效或者如果所有内容都有效，则将帖子数据发送到另一个页面？

例如： 我在页面somesite.com/orderitems 上会有类似的形式

<form method="post" id="orderform" action="somesite.com/shoppingcart">
   <input type="number" name="numitems" id="numitems" value="1">
   <input type="date" name="date" id="date">
</form>

例如，谷歌浏览器已经知道验证您是否输入输入字段required 值并验证日期和数字字段。我还有一个 jquery datepicker，因此用户可以轻松选择日期，还有 jquery 验证器在提交之前验证字段，但所有这些都可以在某些时候被覆盖和/或失败。

所以提交表单时，终点将是 php 中的验证。

但我偶然发现的是，我无法使用 GET 请求获取 somesite.com/shoppingcart 上的数据，因此我必须将 POST 发送到该页面，但如果某些字段无法验证，例如错误日期或错误日期格式，而不是我什至不应该去（重定向或发布）到somesite.com/shoppingcart，而是应该留在页面somesite.com/orderitems 上并显示错误。

那么有这样的解决方案，你会推荐什么建议。我可以将表单发布到同一页面并验证字段，如果一切都好于重定向到另一个页面并传递 POST 数据，或者停留在同一页面并显示错误？

Answer 1

我将向您展示如何通过 JavaScript/Ajax 和 PHP 实现这一点。我认为从本教程中学习这样做并不难，但如果出现一些问题，我愿意为您提供帮助。

JavaScript/Ajax 请求

首先，我们需要在窗体中添加"Submit" 按钮并将"sendData()" 函数设置为其“onclick” 监听器。这意味着每次单击"Submit" 按钮时，"sendData()" 函数都会执行。此外，我们需要为 'number' 和 'date' 输入元素添加 'class' 属性，以便以更简洁的方式获取它们的值。

<form method="post" id="orderform" action="somesite.com/shoppingcart">
   <input type="number" class='myForm' name="numitems" id="numitems" value="1">
   <input type="date" class='myForm' name="date" id="date">
   <input type="Submit" value="Send" onclick = sendData(); return false;"/>
</form>

<script type="text/javascript">

function sendData()
{
    var formElements = document.querySelectorAll(".myForm"); // We use 'class' attribute to get form elements (number and date).
    var formData = new FormData(); // we create FormData object with which we can send data to "PHP" script (server side).
    for(var i = 0; i < formElements.length; i++)
    {
        formData.append(formElements[i].name, formElements[i].value);
    }
    //AJAX Starts Here
    var xmlHttp = new XMLHttpRequest(); // Create "ajax" object
        xmlHttp.onreadystatechange = function() //This is to wait for response from your PHP script
        {
            if(xmlHttp.readyState === 4 && xmlHttp.status === 200) //And when status is OK use result
            {
                var responseText = xmlHttp.responseText; //here you save your response from server side.
                if(responseText["Status"] === "OK") //if you send from server side that "Status" is OK, then you can go to that page
                {
                    window.location.href = "somesite.com/shoppingcart";
                }
                else //otherwise you refresh page
                {
                    window.location.reload();
                }
            }
        }
        xmlHttp.open("POST", "somesite.com/shoppingcart"); //set page value, where you want to send form values
        xmlHttp.send(formData); //send actual data
}

</script>

PHP 验证（避免在客户端进行操作/覆盖）

在服务器端验证值时，设置$_SESSION["Status"] = "OK"。 之后，如果有人试图“破解”您的页面并“更改”您的 JavaScript 函数以导航到 somesite.com/shoppingcart 页面，您将检查：

somesite.com/shoppingcart

<?php
    if($_SESSION["Status"] === "OK"])
    {
       //give permission
    }
    else 
    {
        return false;
    }
?>

Answer 2

我也面临这个问题。我通过这样做来解决它

更新

$(document).ready(function () {
    
    $('#orderform').validate({
        rules: {
            numitems: {
                required: true,
                number: true
            },
            date: {
                required: true,
                date: true
            }
        }
    });

    $('#orderform input').on('keyup blur', function () {
        if ($('#orderform').valid()) {
           $("#button1").removeClass("submit");
           //TRIGGER FORM 
           //$('#orderform').submit();
        }
    });

});

.submit{
  user-select: none;
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>

<form method="post" id="orderform" action="somesite.com/shoppingcart">
   <input type="number" name="numitems" id="numitems"><br/>
   <input type="date" name="date" id="date"><br/>
   <span class="submit" id="button1">SUBMIT</span>
</form>

希望对你有帮助！