Question

我使用jQuery验证器验证我的应用程序上的表单。这是我用来加载和运行它的所有代码：

check_in.js

$(window).bind("load", function() {
  jQuery(function() {

    $('#edit-reservation-form').validate({
      highlight: function(element) {
        $(element).fadeOut(100, function() {
          $(element).addClass("required-input");
          $(element).fadeIn();
        });
      },
      unhighlight: function(element) {
        $(element).removeClass("required-input");
      }
    });

    // To set default messages for validator.
    jQuery.extend(jQuery.validator.messages, {
        required: "Custom text message."
    });
});

在我的application.html.slim

中

= javascript_include_tag "application", "data-turbolinks-track" => true
script[async src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"]

在我想要的每个字段的check_in_form.html.slim（非真实姓名，只是代表性）中，我有'data-rule-required': true

现在，这在本地和机器QA使用的开发和生产中都非常有效。但是，在客户端计算机上它无法正常工作（他使用的是Chrome，但我不确定它是否为最新版本）。我不确切地知道错误，但是对于他所说的内容（并在屏幕截图中显示），当他将一个字段留空时，它就像脚本失败然后它没有重定向到它的位置应该。好像脚本有语法错误或者没有完全加载。

我唯一可以提出的问题（但尚未尝试）是将.js的第一行更改为：

$(document).ready(function() {

将application.html.slim加载到

= javascript_include_tag "application", "data-turbolinks-track" => true, async: Rails.env.production?
script[src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"]

关于可能是什么的任何想法？

Answer 1

您的选择很好，var $form = $('#edit-reservation-form'); var validator = $form.validate(//logic here);。但也要尝试这样做：

validator

我相信你实际上没有声明// To set default messages for validator. jQuery.extend(jQuery.validator.messages, { required: "Custom text message." });。也许你在这里遇到了一些问题：

{{1}}

试试这个，让我们看看它是怎么回事。无论如何，调试Javascript的提示，或者至少我通常使用的是Firefox中的FireBug。我实际上只安装了Firefox来调试Javascript。

让我知道它是怎么回事！祝你好运！

Answer 2

如果您正在使用Turbolinks，那么仅使用ready事件可能会出现问题，因为在您的应用首次加载页面后不会触发，因此您需要绑定到page:load之类的自定义turbolinks事件：

var ready;
ready = function() {
    $('#edit-reservation-form').validate({
        highlight: function(element) {
            $(element).fadeOut(100, function() {
                $(element).addClass("required-input");
                $(element).fadeIn();
            });
        },
        unhighlight: function(element) {
            $(element).removeClass("required-input");
        }
    });

    // To set default messages for validator.
    jQuery.extend(jQuery.validator.messages, {
        required: "Custom text message."
    });
};

$(document).ready(ready);
$(document).on('page:load', ready);

请告诉我这是否有帮助！

对于 Rails 5 ，事件名称已更改为turbolinks:load

jQuery validate（）语法错误？加载？

2 个答案: