Question

我尝试使用ajax和jquery validate（）函数提交表单。当我在本地测试它时，event.preventDefault（）有效！也没有＆＃34; event.preventDefault（）;＆＃34;但是，当我将它部署到服务器时，结果json会加载到新页面中 - 它会阻止重定向。

$(function () {
    $("#photo-form").validate({
        submitHandler: function (form, event) {
            event.preventDefault(); //with or without - doesn't work
            if ($(form)[0].checkValidity()) {
                console.log("No Errors!")
                var formData = new FormData(document.querySelector("#photo-form"));
                var photo = formData.get("photo");

                $.ajax({
                    url: "/photo/",
                    type: 'POST',
                    data: formData,
                    async: false,
                    success: function (data) {
                        console.log("Ajax success");
                        if (data.error == "OK") {
                              alert("Photo was uploaded");
                        } else {
                              //error
                        }
                    },
                    error: function (data) {
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
                return false; //this also doesn't help 
            }
        }
    });
});

在这种情况下错误在哪里？这段代码的本地和服务器有什么区别？

HTML表单：

<form id="photo-form" action="/photo/" method="post" enctype="multipart/form-data"
          class="row col s10 center-block">
        <div class="card row">
            <div class="col s12">
                <h5>Generic Information</h5>
                <div class="input-field col s12 m6">
                    <i class="material-icons prefix">title</i>
                    <input id="campaign_id" type="text" name="campaign_id" class="validate" required>
                    <label for="campaign_id" data-error="huh?" data-success="WOW!">campaign_id</label>
                </div>
                <div class="input-field col s12 m6">
                    <div class="file-field input-field">
                        <button class="btn btn-floating pink lighten-1 file-btn">
                            <span>Photo</span>
                            <input name="photo" type="file">
                        </button>
                        <div class="file-path-wrapper">
                            <input class="file-path validate" type="text">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s8">
                        <button class="btn-large waves-effect waves-light" type="submit">Submit
                            <i class="material-icons right">send</i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </form>

Answer 1

这可能是因为您正在使用HTTPS会话时尝试使用HTTP加载jquery库。确保您使用https：//

加载jquery

Answer 2

表单验证PreventDefault仅在本地工作，但不在服务器上工作

从技术上讲，托管代码的位置并不重要，.preventDefault()是JavaScript，并且始终/仅在浏览器中本地（客户端）工作。所以你的问题在别的地方......即上传到服务器后破解了JavaScript。

尽管您进行了测试，但您的代码中仍有一些错误：

submitHandler: function(form, event) { ...

你不能发明参数来传递给插件开发者提供的回调。他只是给你form论证，就是这样。 event参数在这里毫无意义，将被忽略。
event.preventDefault() 将被忽略。见第1项; event参数在此上下文中没有意义。
您首先不需要event.preventDefault()。该插件会自动处理捕获点击并在内部阻止默认submit操作。
if ($(form)[0].checkValidity()) { ...

据推测，在允许ajax提交之前，您需要检查表单是否通过了验证。这也是完全不合情理的。根据定义，submitHandler only fires when the form is already valid。

此外，checkValidity()与HTML5验证相关联，jQuery Validate插件在初始化时完全禁用。充其量，这不会做任何事情，但是，你应该删除它。

（它没有实际意义，但您也不需要[0]，因为$(form)选择器正在使用插件提供的form参数。）

在本地测试中，您没有破坏插件或阻止其正常运行。由于插件已经自动阻止默认提交，因此您错误地认为您的.preventDefault()正在做某事。部署之后，您错误地认为您的.preventDefault()突然停止工作，相反，整个插件可能会因为下面的项目符号而被破坏。

如果插件没有阻止您的默认表单提交操作，那么您可能有以下一个或多个条件：

jQuery和/或jQuery Validate插件未正确包含
阻止执行JavaScript的错误
不正确的验证规则声明导致表单显示有效
HTML标记问题（错误的选择器等）阻止在表单元素上初始化插件
无效的HTML，例如重复的id等
阻止正确初始化插件的其他一些问题

<强>工作：

$(function () {
    $("#photo-form").validate({
        submitHandler: function(form) {
            console.log("No Errors!");
            console.log("form data: " + $(form).serialize());
            $.ajax({
                ....
            });
            return false;
        }
    });
});

DEMO ：jsfiddle.net/b9x4626a/

Answer 3

检查javascript文件包含在View中。如果你使用Bundle管理css＆amp; js库，您可以尝试通过脚本，链接标记以正常方式包含它。

过去，在将我的应用部署到网络服务器后，我遇到了同样的问题。希望这有帮助。

表单验证PreventDefault仅在本地工作，但不在服务器上工作

3 个答案: