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

【问题标题】：I am using multiple forms, in Slick Slider, which opens up in modal. I need ideas to achieve client side validation我在 Slick Slider 中使用多种形式，它以模态打开。我需要想法来实现客户端验证
【发布时间】：2018-09-03 17:43:59
【问题描述】：

我必须一起提交所有表单，因此必须对所有表单的所有字段返回验证。我尝试将 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
        }        
      }
    }

  }

【问题讨论】：

你能添加一些你尝试过的代码吗？确切的错误是什么？你期望代码应该做什么？
没有任何错误，我想要的是验证失败的错误。
您可以针对 SimpleSchema 进行验证，这将是一种简单的方法，但这是一种观点。你是如何配置 jQuery validate 来知道预期的有效表单应该是什么样子的？
我已经从 cleverbeagle.com/pup 开始构建这个应用程序，所以你可以看到这里的示例。我想要实现的是客户端验证。

标签： jquery reactjs meteor jquery-validate react-component

【解决方案1】：

.validate() 是插件的 initialization 方法，您不会在 switch 中使用它。

在您的文档就绪函数内触发.validate({[options]})。在switch 内使用.valid()。 .valid() 方法是您以编程方式触发验证的方式。

【讨论】：

【解决方案2】：

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

【讨论】：