jQuery验证（）语法错误？加载？

我正在使用jQuery验证器来验证我的应用程序上的窗体。这是我用来加载并运行它的所有代码：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

现在，这完美的开发和生产，本地和第e机器质量保证使用。但是，在客户端机器上工作不正常（他使用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"]

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

来源

2016-07-15 Federico Esteban

您的选择很好，与$(document).ready(function() {。但也尽量要做到这一点：

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." 
    });

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

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

来源

2016-07-15 15:16:17 SrAxi

如果您使用Turbolinks它可能是唯一使用现成事件的一个问题，因为你的程序的第一个页面加载后，不会触发，所以你需要绑定到定制turbolinks像page:load样事件：

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

来源

2016-07-15 16:52:03 neydroid

它说$（...）。确认不是一个函数 –

有必要初始化jQuery的验证插件，让我补充一点 – neydroid

似乎是未正确加载插件，请尝试使用async false并再次检查'= javascript_include_tag“https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js”，async：true' – neydroid

jQuery验证（）语法错误？加载？

回答

相关问题