0

我正在尝试使用 jquery 制作发布方法。我正在以一种形式使用它，并使用 bootstravalidator 来验证它。成功验证后，表单被发布并且 php 开始运行。现在我试图在成功发布后重定向到另一个页面。这是代码：

$('#buy').click(function() {
$.post('php/text.php', $('form#order').serialize(), function () {window.location.href = "index.html";});
});

我尝试了几次，但无法window.location.href = "index.html";正确获得。即使验证错误，表单也会被重定向，或者根本没有任何反应......

我觉得很奇怪，因为'php/text.php', $('form#order').serialize()'只有在验证正确的情况下才会生效......

编辑：

我也在使用 bootstrapvalidator 来验证表单。验证工作完美，如果一切正常，则执行 post 方法。

引导验证器：

$(document).ready(function() {
        var validator = $('#order').bootstrapValidator({
            fields: {
                email : {
                    message : "write email adress", 
                    validators : {
                        notEmpty : {
                            message : "Show Email adress"
                        },
                        stringLength : {
                            min : 6,
                            max: 35,
                        }
                    }
                },
            }
        });
      });

编辑2：

HTML：

<form id="order">
  <input type="text" name="name"/><br>
  <input type="text" name="email"/><br>
  <textarea name="comment"></textarea><br>
  <button type="submit" name="send" id="buy">Send</button>
</form>
4

3 回答 3

0

我觉得你搞错了。

我不确定“bootstrapvalidator”是什么意思。Bootstrap 本身不提供验证，仅提供经过验证的表单元素的视觉指示。

您编写的代码不做任何“验证”。

这$('form#order').serialize()将序列化您的表单，并且仅包含“成功”的表单元素（请参阅https://api.jquery.com/serialize/和https://www.w3.org/TR/html401/interact/forms.html#h -17.13.2用于“成功”的定义）。所有其他表单元素都将被忽略，如果所有表单元素都不“成功”，则会导致一个空字符串。

无论如何，这个字符串（无条件地）被提供给该$.post()方法，因此 POST 请求将始终运行。如果 POST 请求成功（意味着状态码为 2xx 或 304），将执行带有重定向的成功处理程序。

因此，为了实现您的目标，您必须在发送 POST 请求之前对您的表单进行某种验证。您可以手动执行此操作，也可以使用为表单验证制作的任何 jquery 或引导插件。

于 2016-09-02T13:03:57.567 回答
0

一旦您单击#buy按钮，您的表单就会提交，即使您的 javascript 代码运行，页面也会刷新。如果您想禁用表单的提交，您可以使用$(form).on('submit', function() { return fase; }).

这是更新的代码：

$('#order').on('submit', function() {
    $.post('php/text.php',
          $('form#order').serialize(),
          function () {
              window.location.href = "index.html";
          }
    );
    return false;
});

更新

由于您使用 bootstrapvalidator，因此您也应该将插件用于提交过程（该插件具有submitHandler您应该使用的功能）

这是验证器的更新代码：

$(document).ready(function() {
    var validator = $('#order').bootstrapValidator({
        fields: {
            email : {
                message : "write email adress", 
                validators : {
                    notEmpty : {
                    message : "Show Email adress"
                    },
                    stringLength : {
                        min : 6,
                        max: 35,
                    }
                }
            },
        },
        submitHandler: function(validator, form, submitButton) {
            $.post('php/text.php',
                form.serialize(),
                function () {
                    window.location.href = "index.html";
                }
            );
    });
});
于 2016-09-02T13:00:49.550 回答
0

我找到了解决方案

        $(document).ready(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
              });

        $(#button).click(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
            var isValid = true;
            if($('#order').find('div.has-error').length > 0){
            isValid = false;
            };
            if (isValid == true){
                $.post('php/text.php', $('form#order').serialize());
                $(location).attr('href','success.html');;
            };
          });
       });
于 2016-09-06T13:30:37.200 回答