将自定义客户端表单验证添加到 Spree 前端

Question

我正在尝试向 Spree 的 checkout/address 页面中的输入字段添加自定义的客户端验证。所以，这是我到目前为止所做的：

将输入添加到表单（这里使用 Haml & SimpleForm）：
```
= form.input :vat_number, label: Spree.t(:vat_number)
```

在我的 vendor/assets/javascripts/spree/frontend/checkout/address.js.coffee 中，添加 jQuery 验证方法并将规则插入 validate() 调用：

($).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 ...

验证器似乎没有对 vat_number 字段进行操作，尽管其余的表单验证有效。在 javascript 调试控制台中，如果我键入 $.validator.methods，我确实看到添加了新的 vatNumber 方法，所以问题一定出在我调用 validate() 的方式中，或者与我正在使用 SimpleForm.

这一事实有关

我已经将 validate() 调用的代码更改为：

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

我在 javascript 控制台 window 中收到以下错误：

TypeError: undefined is not an object (evaluating '$.data(element.form,"validator").settings')

有人试过吗？

Answer 1

我知道问题出在哪里了。

显然，vatNumber 方法是在 address.js.coffee 文件底部的 Spree.onAddress 调用之后添加的。

我将 addMethod 调用移到了另一个地方（我知道它是 address.js.coffee 中代码之前的 called/run，它突然起作用了。

现在，我想知道这是否是 CoffeeScript 的事情。代码转换成Javascript后，代码的顺序会变吗？

将自定义客户端表单验证添加到 Spree 前端

Adding custom cient-side form validations to Spree frontend

jquery

ruby-on-rails

forms

jquery-validate

spree