微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

是的验证:选择至少一个单选按钮

如何解决是的验证:选择至少一个单选按钮

我想为两个不同命名的单选按钮(称为 testtestTwo)提供验证,其中必须至少选择一个,否则验证失败。我添加一个测试,在这种情况下应该使 isValid 变量失败,但由于某种原因,如果只在 nameTwo 字段中输入内容,它仍然显示为有效。

这是我的代码

import React from 'react';
import { useForm } from 'react-hook-form';
import * as yup from 'yup';

const App = () => {
  const {
    register,handleSubmit,watch,errors,formState: { isValid }
  } = useForm();
  const onSubmit = async data => {
    console.log('form data',data);
    const isValid = await schema.isValid(schema);
  };

  return (
    <>
      {console.log('isValid',isValid)}
      {console.log('errors',errors)}
      <form onSubmit={handleSubmit(onSubmit)}>
        <input name="name" defaultValue="test" ref={register} />

        <input name="nameTwo" ref={register({ required: true })} />
        {errors.examplerequired && <span>This field is required</span>}

        <label>
          <input name="test" type="radio" ref={register} value="test" />
        </label>

        <label>
          <input name="testTwo" type="radio" ref={register} value="testTwo" />
        </label>

        <input type="submit" />
      </form>
    </>
  );
};

const schema = yup.object().shape({
  name: yup.string(),nameTwo: yup.string().required(),test: yup.string(),testTwo: yup.string()
}).test('at-least-one-radio',"you must select at least one radio",value =>
  !!(value.test || value.testTwo));

export default App;

如何获得验证以要求至少选中一个单选按钮?

Stackblitz 演示:https://stackblitz.com/edit/react-lom8mg

另外,我假设失败的验证应该成为错误变量的一部分,对吗? (所以收音机应该在那个变量中)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?