jquery - 我在 Slick Slider 中使用多种形式，它以模态打开。我需要想法来实现客户端验证

Question

我必须一起提交所有表单，因此必须在所有表单的所有字段上返回验证。我尝试将 componentDidMount() 上的 validate() [来自 jquery-validation] 与所有表单绑定。但这不起作用，我也没有任何错误。

我是这项技术的业余爱好者，很想听听专家的意见。

// from validate.js

import $ from 'jquery';
import 'jquery-validation';

export default (form, options) => $(form).validate(options);  

// my modal component:

  componentDidMount() {
    const component = this
    for (const key in component.forms) {
      if (component.forms.hasOwnProperty(key)) {
        const form = component.forms[key]

        switch (form.id) {
          case 'form_1':
            validate(form, {
              rules: {
                name: {
                  required: true,
                },
              },
              messages: {
                name: {
                  required: 'Ico name is required!',
                },
              }
            })
          break

          case 'form_2':
            validate(form, {
              rules: {
                website: {
                  required: true,
                },
                description: {
                  required: true,
                },
              },
              messages: {
                website: {
                  required: "Please share ico's website",
                },
                description: {
                  required: 'Please provide a short description',
                },
              }
            })
            break

          default:
            break
        }        
      }
    }

  }

Answer 1

.validate()是插件的初始化方法，你不会在switch.

.validate({[options]})在您的文档就绪功能内部触发。.valid()在switch. _ 该.valid()方法是您以编程方式触发验证的方式。

Answer 2

我最终制作了自己的错误处理组件，该组件将根据状态更改触发，状态更新在onChange验证失败的表单字段中触发。