在 Yup React 中基于 checkbox

如何解决在 Yup React 中基于 checkbox

我正在使用 React-form-hook 在 React 中构建表单并使用 yup 进行验证。

我正在使用 watch() 检查复选框是否被点击，如果被点击，它将在表单中显示另一个以前不可见的输入字段。

即使我没有点击复选框，这意味着引用输入字段不可见或呈现，它仍然不执行 handlesubmit。

我想不出办法来解决这个问题。

   <div className="form-check">
      <input type="checkBox" id="askRefer" {...register("askRefer")} />
      <label className="form-check-label" htmlFor="askRefer">
        Refered ?
      </label>
   </div>

  {referedStatus && (
      <div className="form-group">
        <label htmlFor="referednumber">Refereed Number</label>
        <input
          type="text"
          className="form-control"
          placeholder="refer number"
          {...register("refer")}
        />
        {errors.refer && (
          <p className="error-message">{errors.refer.message}</p>
        )}
      </div>
    )}

是的验证码。

const valSchema = yup.object().shape({
    email: yup.string()
          .required("email is required")
          .email("only accepts an email"),password: yup.string().required("password cannot be empty"),confirmPassword: yup.string()
           .required("confirmation of password is important")
           .oneOf([yup.ref("password"),null],"password doesn't match"),refer:yup.number()
             .required("please input refer number")
             .positive("entry should be greater than 0")
             .integer("input integer value"))
   });

重钩形式：

 const {register,handleSubmit,watch,formState: { errors }} = useForm({
                                                        resolver: yupResolver(valSchema),mode: "onTouched",});
let referedStatus= watch("askRefer",false);

如果有帮助，完整代码在这里：

import React from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

function Rform() {


  const valSchema = yup.object().shape({
    email: yup
      .string()
      .required("email is required")
      .email("only accepts an email"),confirmPassword: yup
      .string()
      .required("confirmation of password is important")
      .oneOf([yup.ref("password"),refer:(yup
      .number()
      .required("please input refer number")
      .positive("entry should be greater than 0")
      .integer("input integer value"))
  });

  console.log(valSchema)

  const {
    register,formState: { errors },} = useForm({
    resolver: yupResolver(valSchema),});

let referedStatus= watch("askRefer",false);

  const onSubmit = (formData) => {
    let url = "http://localhost:4000/things/register";
    fetch(url,{
      method: "POST",headers: {'Content-Type': 'application/json'},body: JSON.stringify(formData)
    })
      .then((response) => response.json())
      .then((result) => console.log(result));
  };
  console.log(referedStatus);

  return (
    <div className="container" onSubmit={handleSubmit(onSubmit)}>
      <form>
        <div className="form-group">
          <label>Email address</label>
          <input
            className="form-control"
            aria-describedby="emailHelp"
            placeholder="Enter email"
            {...register("email")}
          />
          <small className="form-text text-muted">
                We don't share the credential.
          </small>
          {errors.email && (
            <p className="error-message">{errors.email.message}</p>
          )}
        </div>
        <div className="form-group">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Password"
            {...register("password")}
          />
          {errors.password && (
            <p className="error-message">{errors.password.message}</p>
          )}
        </div>

        <div className="form-group">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Password"
            {...register("confirmPassword")}
          />
          {errors.confirmPassword && (
            <p className="error-message">{errors.confirmPassword.message}</p>
          )}
        </div>

        <div className="form-check">
          <input type="checkBox" id="askRefer" {...register("askRefer")} />
          <label className="form-check-label" htmlFor="askRefer">
            Refered ?
          </label>
        </div>

        {referedStatus && (
          <div className="form-group">
            <label htmlFor="referednumber">Refereed Number</label>
            <input
              type="text"
              className="form-control"
              placeholder="refer number"
              {...register("refer")}
            />
            {errors.refer && (
              <p className="error-message">{errors.refer.message}</p>
            )}
          </div>
        )}

        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </form>
    </div>
  );
}

export default Rform;

这是表单在浏览器中的样子。

解决方法

这是因为您的 yup 架构中需要可选字段“refer”（只要“askRefer”为 false）。您必须将“askRefer”复选框添加到 yup 架构中，然后您可以通过 when 方法进行检查，如果“askRefer”为 true，则为“refer”设置验证。

const valSchema = yup.object().shape({
  email: yup
    .string()
    .required("email is required")
    .email("only accepts an email"),password: yup.string().required("password cannot be empty"),confirmPassword: yup
    .string()
    .required("confirmation of password is important")
    .oneOf([yup.ref("password"),null],"password doesn't match"),askRefer: yup.boolean(),refer: yup.number().when("askRefer",{
    is: true,then: yup
      .number()
      .required("please input refer number")
      .positive("entry should be greater than 0")
      .integer("input integer value")
  })
});