提交后PHP防止页面刷新/加载答案

【问题标题】：PHP Prevent Page Refresh/Load after Submit提交后PHP防止页面刷新/加载
【发布时间】：2015-12-02 00:37:43
【问题描述】：

我正在尝试使用 PHP 验证表单中的字段，但如果验证中出现错误，我需要类似于 e.preventDefault() 来阻止页面刷新/加载。我对 JavaScript/jQuery 不是很熟悉，所以我更喜欢用 PHP 处理所有的 POST 数据（如果可能的话）。我试图在提交时运行 checkForm() 函数，但我意识到它总是返回 true，因为它在数据发布之前运行。我还考虑过创建一个 JS 函数来调用 e.preventDefault()，但我认为我唯一的选择是 (#form).submit() 函数，我想避免在 JS/jQuery 中检索和发布数据，因为有些元素是 DOM 元素，我不知道如何在 JS/jQuery 中访问它们。

为了让您了解我正在使用的 DOM 元素，这里有一个动态创建行的 jsfiddle：

https://jsfiddle.net/hnj6ed1y/52/

可能有多行并且字段具有相似的名称（即：textfield1、textfield2 等）。

有什么想法吗？提前感谢您的所有帮助！

    <?php

    // setting initial variables here

    ?>

    <script>

    var isDateTimeValid = true;

    function checkDates(val) {

        if (val == false) {
            isDateTimeValid = false;
        }
        else {
            isDateTimeValid = true;
        }
    }


    function checkForm () {

        if (isDateTimeValid == true) {
            return true;
        }
        else {
            alert("Please check date/times");
            return false;
        }
    }
    </script>

    <?php

    if(isset($_POST['next'])){

        // Validating POST data here

        $dateValid = convertOORDateTime($date1, $time1, $date2, $time2);

        if ($dateValid < 1) {
            echo "<script> checkDates(false); </script>";
            $errors[] = 'Please make sure your dates are correct';
        }
        else {
            echo "<script> checkDates(true); </script>";
        }

    }

    $err_msg = '';

    if(!empty($errors)){

        // want to stop page refresh/load here

        $err_msg = '<p class="error">'.implode('<br />', $errors).'</p>';   
    }

    ?>

    <!DOCTYPE html>
    <form name="form1" id="form1" method="post" action="<?php print $thispage;?>" onsubmit="return checkForm()">

        <?php echo $err_msg; ?>

    </form>

【问题讨论】：

要么你糊涂，要么我糊涂。
@bassxzero 我肯定很困惑。我只是试图验证 PHP 中的 POST 数据（正在工作），但是当我遇到无效数据时，我需要防止页面重新加载。我知道 HTML 中的“回声”需要重新加载页面，但我可以解决这个问题。
所以您希望服务器在不刷新页面的情况下检查您的页面？这可能吗？
我不认为你的代码结构可以做你想做的事。如果您要依赖 javascript 并且想要验证数据服务器端，我会阻止默认提交操作，使用 Ajax 将表单数据提交到处理验证脚本，然后在数据有效时提交表单。
@bassxzero 我从未使用过 Ajax，但这是否意味着我使用 (#form).submit，在该侦听器上调用 e.preventDefault，并在该函数中使用 Ajax？任何可能的伪代码或通过 Ajax 调用验证脚本的示例？

标签： javascript php jquery html

【解决方案1】：

当您的 checkForm 无法阻止表单提交时，这很奇怪。您的 JS 代码可能会抛出错误，然后代码会继续运行。

简单的方法是将提交按钮更改为普通按钮。单击普通按钮时，表单不会自动提交。验证成功后，您可以通过 jquery 手动提交表单。

$('#button-id').click(function(){
    var valid = true;
    // perform the validation here, for example
    if($('something').val() == "") {
        valid = false;
        // notice user the error
    }
    // Continue to validate

    // Finally, check the valid
    if(valid) {
        ('#form-id').submit();
    }
});

在验证部分，你可能会使用jQuery验证，然后你可以这样做

var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
   if(form.valid()) {
       form.submit();
   }
});

【讨论】：

我是否必须将验证移至 JS/jQuery .submit();函数而不是 PHP 代码？
在您的第一个示例中，我是否需要对字段名称进行硬编码才能对其进行验证（即：if($('field1').val() == "")）？我问的原因是因为我需要比较日期字段（即：if($('date1').val() > $('date2').val())，但用户可以添加任意数量的日期字段，所以我怎么知道是否添加了 date3 和 date4 以便比较一下？
可能您需要使用 $('input[name^=”value”]') 来查询名称以 'value' 开头的输入并找到最后一个（例如 $('输入[name^=”value”]:last') 或 $('input[name^=”value”]').last())。一旦你有了最后一个的数量，例如，7（提示，你可以通过额外的属性存储输入的数量，比如 data-id="number-id"，这样，你就不需要解析 number-id输入的名称），您可以使用 while 循环将每个与前一个进行比较， $('input[name=”value'+i+'”]').val()
谢谢@Khanh！我将尝试为此创建一个 jsFiddle，看看我是否可以让它工作。

【解决方案2】：

您应该将验证检查客户端/服务器分开。在提交之前使用 JS，之后使用 PHP。不要将两者混为一谈。当您通过 php 调用 JS 时，服务器必须向浏览器（客户端）发送响应以使任何事情发生，从而重新加载页面。

示例：echo "<script> checkDates(false); </script>"; Echo() 将输出发送到浏览器（客户端）。在这种情况下需要 JS 来运行一个函数。

使用 on.(Blur) 在提交前实时进行简单验证。提交后，您将使用 PHP 服务器端验证。永远不要依赖客户。 JS可以通过浏览器关闭、编辑等。

<form>
  <input tabindex="1" id="field1" type="text" name="field1" value="value 1" required />
  <input tabindex="2" id="field2" type="text" name="field2" value="value 2" required />
  <input tabindex="3" type="text" name="field3" value="value 3" />
  <input tabindex="4" type="submit" name="submit" value="Submit" />
</form>

<script>
/* Simplistic validation */
jQuery(document).ready(function($){
  jQuery(document).on("blur", "#field1", function(){
    // validate this field

  });

  jQuery(document).on("blur", "#field2", function(){
    // validate this field

  });

});
</script>

【讨论】：

我正在使用模糊，但有些字段需要与其他字段进行比较（即：两个日期字段），所以我认为模糊在这种情况下不起作用？
Blur 不会帮他处理提交表单数据
感谢@Brian 的澄清。我想避免页面重新加载，因为如果我使用 PHP 验证它会清除表单，但我认为我只需将他们的数据存储在会话中，以便在页面重新加载后调用它。
在您的原始帖子中，请描述您要完成的工作的总体范围。老实说，我相信你的方法是有缺陷的。没有不尊重的意思。据我所知，您正在动态生成其他字段，然后想用 JS 验证它们，然后用 Php 提交验证。同样通过检查小提琴源，每个新字段都是“temp”+递增的数字。就我个人而言，我会使用数组方法 .... name="field[]" 然后 js 验证数组中的最后一个条目。但这只是我。