Javascript PHP阻止提交后刷新/加载页面_Javascript_Php_Jquery_Html

Javascript PHP阻止提交后刷新/加载页面

javascript php jquery html

Javascript PHP阻止提交后刷新/加载页面,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我正在尝试使用PHP验证表单中的字段，但是如果验证中出现错误，我需要类似于e.preventDefault（）的东西来阻止页面刷新/加载。我不太熟悉JavaScript/jQuery，所以我更喜欢用PHP处理所有POST数据（如果可能的话）。我试图在提交时运行checkForm（）函数，但我意识到它总是返回true，因为它在数据发布之前运行。我还考虑创建一个JS函数来调用e.preventDefault（），但我认为我唯一的选择是（#form）.submit（）函数，我希望避免在JS/jQuer

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

为了让您了解我正在使用的DOM元素，下面是一个动态创建行的JSFIDLE：

可能有多行，并且字段具有相似的名称（即：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>


var isDateTimeValid=true；
函数检查日期（val）{
如果（val==false）{
isDateTimeValid=false；
}
否则{
isDateTimeValid=true；
}
}
函数检查表（）{
如果（isDateTimeValid==true）{
返回true；
}
否则{
警报（“请检查日期/时间”）；
返回false；
}
}
您应该将验证检查与客户端/服务器分开。提交前使用JS，提交后使用PHP。不要把这两者混在一起。当您通过php调用JS时，服务器必须向浏览器（客户机）发送一个响应，以了解发生的任何事情，从而重新加载页面
示例：echo“checkDates（false）；”
Echo（）将输出发送到浏览器（客户端）。在本例中，它需要JS来运行函数
使用on.（模糊）在提交前实时执行简单验证。提交后，使用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>


/*简单化验证*/
jQuery（文档）.ready（函数（$）{
jQuery（document）.on（“blur”，“#field1”，function（）{
//验证此字段
});
jQuery（document）.on（“blur”，“#field2”，function（）{
//验证此字段
});
});
当您的支票表单无法阻止表单提交时，这很奇怪。您的JS代码可能会抛出错误，然后代码将继续运行
简单的方法是将submit按钮更改为normal按钮。单击“正常”按钮时，表单不会自动提交。验证完成后，您可以通过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();
   }
});

要么你糊涂了，要么我糊涂了。@bassxzero我肯定糊涂了。我只是尝试用PHP验证POST数据（这是可行的），但我需要防止在遇到无效数据时重新加载页面。我知道HTML中的“echo”要求重新加载页面，但我可以解决这个问题。所以你希望服务器在不刷新页面的情况下检查页面？这可能吗？我不认为你的代码是按照你想要的方式构造的。如果您要依赖javascript并希望验证数据服务器端，我会阻止默认的提交操作，使用Ajax将表单数据提交到处理验证脚本，然后在数据有效的情况下提交表单。@bassxzero我从未使用过Ajax，但这是否意味着我使用（#表单）。提交，在该侦听器上调用e.preventDefault，并在该函数中使用Ajax？任何可能的伪代码或通过Ajax调用验证脚本的示例？我正在使用blur，但有些字段需要与其他字段（即：两个日期字段）进行比较，因此我认为blur在这种情况下不起作用？blur不会帮他处理提交表单数据的问题。感谢您的澄清，@Brian。我想避免页面重新加载，因为如果我使用PHP进行验证，它会清除表单，但我认为我只需要将他们的数据存储在会话中，以便在页面重新加载后调用。在您的原始帖子中，请描述您试图完成的总体范围。我相信你的方法是有缺陷的。没有不尊重的意思。据我所见，您正在动态生成其他字段，然后希望使用JS验证它们，然后使用Php提交验证。此外，通过检查小提琴源，每个新字段都是“temp”+递增的数字。就我个人而言，我会使用数组方法。。。。name=“field[]”然后js验证数组中的最后一个条目。但这只是我的问题。如果你选择数组路径，那么如果有错误，你可以在提交时使用foreach（$field as$value）循环重新填充/创建字段。我是否必须将验证移到JS/jQuery.submit（）；函数而不是PHP代码中的函数？在第一个示例中，我是否需要硬编码字段名以验证它（即：if（$（'field1'）.val（）==“”）
）？我问这个问题的原因是因为我需要比较日期字段（即：if（$（'date1'）.val（）>$（'date2'）.val（））
，但是用户可以添加任意数量的日期字段，所以我如何知道是否添加了日期3和日期4来比较它们？可能需要使用$（'input[name^=“value”]））查询名称以“value”开头的输入并查找最后一个输入（例如$（'input[name^=“value”]：last'）或$（'input[name^=“value”]）.last（））。获得最后一个输入的编号后，例如7（提示，可以通过数据id=“number id”等额外属性存储输入的编号，这样，您就不需要从输入的名称中解析数字id），您可以使用while循环将每个数字id与前面的数字进行比较，$（'input[name=“value”+i+'“]'）。val（）<$（'input[name=“value”+i-1+'”）。val（）。谢谢@Khanh！我将尝试创建一个js