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

Posted 2023-05-09

【中文标题】向 Spree 前端添加自定义客户端表单验证

【英文标题】：Adding custom cient-side form validations to Spree frontend

【发布时间】：2017-04-09 02:28:13

【问题描述】：

我正在尝试向 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 方法并将规则插入到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 控制台窗口中收到以下错误：

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

有人试过吗？

【参考方案1】：

我发现了问题所在。

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

我将addMethod 调用移到了另一个地方（我知道它在address.js.coffee 中的代码之前被调用/运行，并且它突然起作用了。

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