構文のj​​Query validate（）エラー？負荷？

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を使用していますが、最新のバージョンであるかどうかはわかりません）。 私はエラーを正確には分かりませんが、彼が言ったこと（スクリーンショットで示したもの）については、フィールドを空白のままにしておくと、スクリプトが失敗していて、次にどこに向かわないかのようです。スクリプトに構文エラーがあるか、まったく読み込まれていないかのように。

にapplication.html.slim上

$(document).ready(function() {

とロード：

私が出てくる可能性が（まだ試していませんが）唯一のものはに.jsファイルの最初の行を変更することです

= 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

あなたのオプションは$(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です。私は実際にはJavaScriptをデバッグするためにFirefoxをインストールしているだけです。

どうすればいいか教えてください！がんばろう！

Answer 2

アプリの最初のページのロード後に解雇されていないので、カスタムにバインドする必要があるので、それは、唯一のreadyイベントを使用するに問題がある可能性がTurbolinksを使用している場合は、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