导入jQuery验证

我想将'jquery validation'导入ES6类

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

但当我在同一个文件中的任何地方进行时

$(...).validate({...})

我得到错误

Uncaught TypeError: $(...).validate is not a function

从代码示例的外观来看，您没有正确导入它。作品👌对我来说，有以下导入(与Webpack捆绑(：

import $ from 'jquery'
import validate from 'jquery-validation'

import { useRef } from "react";
import $ from "jquery";
import validate from "jquery-validation";
import "./styles.css";
export default function App() {
  const ref = useRef();
  function handleFormSubmit(e) {
    e.preventDefault();
    $(ref.current).validate({
      rules: {
        name: { required: true },
        address: { required: true }
      },
      messages: {
        name: { required: "Name field is required" },
        address: { required: "Address field is required" }
      }
    });
  }
  return (
    <form ref={ref} onSubmit={handleFormSubmit} noValidate="novalidate">
      <input name="name" id="name" type="text" placeholder="Name" />
      <textarea
        name="address"
        id="address"
        cols="4"
        rows="4"
        placeholder="Address"
      ></textarea>
      <button type="submit">Submit</button>
    </form>
  );
}

和链接https://codesandbox.io/s/gallant-dirac-7h8t6?file=/src/App.js:0-873

相关内容

最新更新

热门标签：