Adding custom cient-side form validations to Spree

问题:

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:

1. Add the input to the form (here using Haml & SimpleForm):

   = form.input :vat_number, label: Spree.t(:vat_number)
   

2. 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?

回答1:

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?