Form validate PreventDefault 仅在本地有效，但在服务器上无效

Question

我尝试使用 ajax 和 jquery validate() 函数提交表单。当我在本地测试它时， event.preventDefault() 有效！也没有“event.preventDefault();”行但是，当我将它部署到服务器时，结果 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

检查包含在视图中的 javascript 文件。如果您使用 Bundle 来管理 css 和 js 库，您可以尝试以正常方式将其包含在脚本、链接标签中。

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

Answer 3

Form validate PreventDefault 仅在本地有效，在服务器上无效

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

---

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

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

   您不能发明参数来传递给插件开发人员提供的回调。他只是给你form 参数，仅此而已。 event 参数在这里没有意义，将被忽略。

2. event.preventDefault() 将被忽略。见项目#1； event 参数在这种情况下没有意义。

3. 首先你不需要event.preventDefault()。该插件会在内部自动处理捕获点击并阻止默认的submit 操作。

4. if ($(form)[0].checkValidity()) { ...

   大概您在允许ajax 提交之前检查表单是否通过验证。这也是完全没有必要的。根据定义，submitHandleronly 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;
        }
    });
});

演示：jsfiddle.net/b9x4626a/