将表单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日期选择器,因此用户可以轻松地选择日期,还有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()"功能都会执行.此外,我们需要将'class'属性添加到'number'和'date'输入元素,以更清晰的方式获取它们的值.

<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;
    }
?>