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

Question

I'm using the jQuery validator to validate a form on my application. This is all the code I used to load and run it:

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

And in my 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"]

And in my check_in_form.html.slim (not real name, just representative) for each field that I want to be required I have 'data-rule-required': true

Now, this works perfectly in development, and production, both locally and on the machines QA use. HOWEVER, on the client machine it is not working properly (he's using Chrome but I'm not sure it's the latest version). I don't know exactly the error, but for what he said (and showed on a screenshot), when he leaves a field blank, it's like the script is failing and then it is not redirecting to where it should. As if the script had a syntax error or something is not entirely loaded.

The only thing I could come up (but haven't tried yet) is to change the first line of the .js to:

$(document).ready(function() {

And the loading on application.html.slim to

= 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"]

Any ideas on what might be?

Answer 1

Your option is good, with the $(document).ready(function() { . But try also to do this:

var $form = $('#edit-reservation-form');
var validator = $form.validate(//logic here);

I believe you didn't actually declare validator . And maybe you had some problems here:

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

Try this and let's see how it goes. Anyhow, a tip to debug Javascript, or at least what I usually use is FireBug in Firefox. I actually only have Firefox installed to debug Javascript.

Let me know how it goes! Good luck!

Answer 2

If you're using Turbolinks it could be a problem to only use the ready event, because is not fired after the first page load of your app, so you need to bind to custom turbolinks events like page:load like:

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);

Let me know if this helps!

For Rails 5 the event name changed to turbolinks:load