[英]Formik + yup: how to validate a location schema where the fields(country, state, city) are not mandatory, but if one is filled, each should be filled?
[英]Mandatory not working If both blank it works but one of these filled then not work and only one value inserted in DB
const handleChange = (e) => {
console.log("handleChange")
setSuccessMessage("")
setErrorMessage("")
setMandatory(false)
let { name, value } = e.target
validator(name, value);
}
const handleSubmit = (e) => {
e.preventDefault();
setSuccessMessage("")
setErrorMessage("")
if (formValue.userName === "" || formValue.passWord === "") {
console.log("Mandatory")
setMandatory(true)
}
else {
axios.post(url, formValue)
.then(response => {
console.log(response);
let newMsg = "Loged in successfully for ID: " + response.data.id
setSuccessMessage(newMsg)
})
.catch(error => {
console.log(error);
setErrorMessage(message.ERROR)
})
}
const validator = (name, value) => {
console.log("validator")
switch (name) {
case "userName":
console.log("switchName")
// let regex=/^[A-Za-z]+([\s][A-Za-z]+)*$/;
setformValue({
"userName": value
})
if (!(value.match(/^[A-Za-z]+([\s][A-Za-z]+)*$/))) {
setformErrors({
"username": "Enter letters only"
})
}
else {
setformErrors({
"username": ""
})
}
break;
case "passWord":
setformValue({
"passWord": value
})
if (!value.match(/^.*[A-Z].*$/)) {
setformErrors({
"password": "Password should contain at least one capital letter"
})
}
else if (!value.match(/^.*[a-z].*$/)) {
setformErrors({
"password": "Password should contain at least one small letter"
})
} else if (!value.match(/^.*[!@#$%^&*].*$/)) {
setformErrors({
"password": "Password should contain at least one symbol"
})
}
else if (!value.match(/^.*[0-9].*$/)) {
setformErrors({
"password": "Password should contain at least one number"
})
}
else {
setformErrors({
"password": ""
})
}
if (value.length < 7) {
setformErrors({
"password": "Password length should at least 8 "
})
}
break;
default:
}
if (Object.values(formErrors).every((value) => value === "")) {
console.log("Valid true")
setValid(true)
}
else {
setValid(false)
}
}
//Input
<form className='form' onSubmit={handleSubmit}>
<div className='container w-25 p-4 text-danger text-center'>
<div className='form-floating mt-3 mb-3'>
<input type="text" className='form-control ' name="userName" placeholder='Enter Username'
value={formValue.userName} onChange={handleChange} />
<label className='form-label fw-bold'>User Name</label>
<span className="text-danger fw-bold">{formErrors.username}</span>
</div>
<div className='form-floating mt-3 mb-3'>
<input type="password" className='form-control' name="passWord" placeholder='Enter Password'
value={formValue.passWord} onChange={handleChange} />
<label className='form-label fw-bold'>Password</label>
<span className="text-danger fw-bold">{formErrors.password}</span>
</div>
<button type='submit' className='badge p-2 m-2 btn-success fw-bold'
disabled={!valid}>Login</button>
<div className="text-danger- fw-bold">{
mandatory ? message.MANDATORY : null
}
</div>
<div className="text-success fw-bolf">{successMessage}</div>
</div>
</form>
如果兩個字段均為空白,則顯示錯誤消息,但其中一個字段已填滿,則顯示成功消息。 如果輸入第二個值,那么它將清除第一個值,並且在 DB 中也只添加一個字段。 代碼有什么問題? ..................................................... ..................................................... ...................................................
在這些中,如果第一個值為真,那么它會執行,它不會看到第二個值,所以嘗試改變條件。寫 if else if like it may work
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.