Q: Adding custom cient-side form validations to Spree frontend I am trying to add a custom, client-side validation to an input field in Spree's checkout/address page.
So, here is what I have done so far:


*

*Add the input to the form (here using Haml & SimpleForm):
= form.input :vat_number, label: Spree.t(:vat_number)


*Inside my vendor/assets/javascripts/spree/frontend/checkout/address.js.coffee, add the jQuery validate method and insert the rule into the validate() call:
($).validator.addMethod "vatNumber", (value, element) -> 
  return false
, "Something wrong!"

Spree.onAddress = () ->
  if ($ '#checkout_form_address').is('*')

  ($ '#checkout_form_address').validate({
    rules: {
      order_bill_address_attributes_vat_number: {
        vatNumber: true
      }
    }
  })

  # ... rest of the file ...

The validator does not seem to operate on the vat_number field, although the remaining form validations work. In the javascript debug console, if I type $.validator.methods, I do see the new vatNumber method added in, so the problem must be either in the way I call validate(), or something to do with the fact that I am using SimpleForm.
I have changed the code around the validate() call to this:
($ '#order_bill_address_attributes_vat_number').rules("add", {vatNumber: true})
($ '#checkout_form_address').validate()

And I got the following error in the javascript console window:
TypeError: undefined is not an object (evaluating '$.data(element.form,"validator").settings')

Has anyone tried to do this?

A: I figured out what the problem was.
Apparently, the vatNumber method was being added after the Spree.onAddress call on the bottom of the address.js.coffee file.
I moved the addMethod call to a different place (where I know it is called/run before the code in address.js.coffee and it suddenly worked.
Now, I wonder if this is a CoffeeScript thing. Could the order of the code change after the code is converted to Javascript?
