小编Nik*_*Nik的帖子

我正在使用 Yup 根据验证模式验证嵌套数据对象。我想检索第一个验证错误的路径。我用validate()尝试过，是的。它有默认为 true 的选项abortEarly。因此在这种情况下应该返回第一个错误。

但是，我总是收到最后一个错误。我不确定我错过了什么。

下面是我迄今为止尝试过的代码。

  const validationSchema = Yup.object().shape({
    basicDetails: Yup.object().shape({
      firstName: Yup.string().required("Required first name"),
      lastName: Yup.string().required("Required last name"),
      gender: Yup.string().required("Required gender"),
      phoneNumber: Yup.string().required("Required phone number"),
      emailId: Yup.string().required("Email id is required")
    }),
    educationDetails: Yup.object().shape({
      graduationDegree: Yup.string().required("Required graduation degree"),
      postGraduationDegree: Yup.string().required(
        "Required post graduation degree"
      ),
      registrationNumber: Yup.string().required("Required registration number"),
      workExperience: Yup.string().required("Required work experience")
    })
  });

  const dataObject = {
    basicDetails: {
      firstName: "Nik",
      lastName: "Test",
      gender: "male",
      phoneNumber: "9876543210",
      emailId: ""
    },
    educationDetails: { …

我目前有一个HTML选择下拉列表,其中有六个选项我想要实现的是当选择"其他"选项时出现javascript警告,但由于某种原因我无法使其工作.

我已经尝试将onclick移动到选择标签而不是选项标签,并将警报移到参数之外,这样一旦点击下拉菜单就可以显示它,但这不是我想要实现的.

function otherPayment() {
  var paymentType = document.getElementById("paymentType").value;
  if (paymentType == "Other") {
    alert("test");
  }
}

<div class="form-group">
  <label for="paymentType">Payment Type:</label>
  <select class="form-control" id="paymentType" name="paymentType" required>
    <option value="">-</option>
    <option value="Payment (Initial)">Payment (Initial)</option>
    <option value="Payment (Full)">Payment (Full)</option>
    <option value="Payment (Balance)">Payment (Balance)</option>
    <option value="Delivery Fee">Delivery</option>
    <option onclick="otherPayment()" value="Other">Other</option>
  </select>
</div>

我与使用反应表单验证工作Yup，沿Formik。react-select表单中的一个元素也需要验证。为了验证我正在做使用validationSchema的Formik，以验证形式值的变化。我只需要选择字段的值作为字符串，所以不能采用完整的对象（键值）。选择字段运行良好，但是没有清除验证错误消息。问题是如何使用现有方法验证选择字段？

以下是最少的代码示例。

import ReactDOM from "react-dom";
import React, { useState } from "react";
import { Grid, TextField, Button } from "@material-ui/core";
import { Formik } from "formik";
import * as Yup from "yup";
import Select from "react-select";
import "./styles.css";

function App() {
  const [selectedYear, setSelectedYear] = useState("");

  const testSchema = Yup.object().shape({
    name: Yup.string().required("Enter Name"),
    year: Yup.string().required("Select Year")
  });

  const initialValues = {
    name: "",
    year: ""
  };

  const handleYearChange = …