Mandatory not working If both blank it works but one of these filled then not work and only one value inserted in DB

Question

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>

If both the fields are blank, then it shows the error message but one of these filled then it is showing success message. If second value is entered, then it will clear the first value and also only one field is added in DB. What is wrong with code? ............................................................................................................................................

Answer 1

in these if if the first value is true then its going to execute,it wont see the second value, so try to change the condition.write if else if like it may work