反應可選字段驗證

Question

我有一個帶有下一個字段的注冊表單：

1. 姓名
2. Email
3. 密碼
4. 確認密碼
5. 可選字段
6. Select 角色（學生、教授、秘書）

我想要的是：

如果我想創建具有學生角色的用戶，則不應考慮可選字段，但如果我想創建教授/秘書用戶，則必須在可選字段中輸入某個密碼（ https://prnt.sc /159y5x9 )

這是我的寄存器 function：

function Register() {
const [user, setUser] = useState(initialState)
const pswdProfesor = "profpassword"  //password needed for professor role
const pswdSecretar = "secretpasswor" // password needed for secretary role

const {name, email, password,cf_password, role, err, success} = user

const handleChangeInput = e => {
    const {name, value} = e.target
    setUser({...user, [name]:value, err: '', success: ''})
}

const handleSubmit = async e => {
    e.preventDefault()
    if(isEmpty(name) || isEmpty(password) || isEmpty(role))
            return setUser({...user, err: "Completati campurile", success: ''})

    if(!isEmail(email))
        return setUser({...user, err: "Email invalid", success: ''})

    if(isLength(password))
        return setUser({...user, err: "Parola trebuie sa fie minim 6 caractere", success: ''})
    
    if(!isMatch(password, cf_password))
        return setUser({...user, err: "Parola nu coincide", success: ''})

    // validation for Optional field here //

    try {
        const res = await axios.post('/user/register', {
            name, email, password, role
        })

        setUser({...user, err: '', success: res.data.msg})
    } catch (err) {
        console.log("hello")

        err.response.data.msg && 
        setUser({...user, err: err.response.data.msg, success: ''})
    }
}

PS：我正在使用 React 和 Material UI TextField

Answer 1

你可以做這樣的事情

    // validation for Optional field here //

   if(role === "professor" || role === "secretary "){
    if (isEmpty(optional)) {
      return setUser({ ...user, err: "Optional field is required", success: "" });
    }
  }

或者

// validation for Optional field here //

   if(!isEmpty(role) && role !== "student"){
      if (isEmpty(optional)) {
        return setUser({ ...user, err: "Optional field is required", success: "" });
      }
    }

或者

// validation for Optional field here //

   if(!isEmpty(role) && role !== "student" && isEmpty(optional)){
        return setUser({ ...user, err: "Optional field is required", success: "" });
    }