Как устранить ошибку проверки электронной почты и пароля с помощью кнопки отключения в Reactjs

Question

Я новичок в ReactJS. Этот пример я пытаюсь реализовать на практике, но столкнулся с проблемой. Когда я нажимаю кнопку «Отправить», в журнале консоли печатается «действительная форма», но это должна быть «недопустимая форма». Я не могу найти эту проблему, пожалуйста, любой может ее решить. А также я хочу, чтобы это было, когда адрес электронной почты и пароль пустые или неправильные, тогда кнопка отправки должна быть отключена. когда адрес электронной почты и пароль совпадают с нашим условием, активируется кнопка отправки. Пожалуйста, решите эту проблему. Вот компонент с формой:

    const validEmailRegex = RegExp(
        /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
    );

    const validateForm = errors => {
        let valid = true;
        Object.values(errors).forEach(val => val.length > 0 && (valid = false));
        return valid;
    };

class Login2 extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            email: null,
            password: null,
            errors: {
                email: '',
                password: '',
            },
            isButtonDisabled: true,
        }
    }

    handleChange = (event) => {
        event.preventDefault();

        const {name, value} = event.target;

        let errors = this.state.errors;

        switch (name) {

            case 'email':
                errors.email =
                    validEmailRegex.test(value) ? '' : 'Email is not valid!';
                break;

            case 'password':
                errors.password =
                    value.length < 8 ? 'Password must be at least 8 characters long!' : '';
                break;

            default:
                break;
        }

        this.setState({errors, [name]: value});
    }

    handleSubmit = (event) => {
        event.preventDefault();

        const data = {
            email: this.state.email,
            password: this.state.password
        }


        if (validateForm(this.state.errors)) {
            console.log(data)
            console.info('Valid Form')
        } else {
            if (this.state.errors.email === null || this.state.errors.password === null) {
                console.log('Invalid Form', this.state.errors.email)
            }

        }
    }

    /*submitForm(e) {
        e.preventDefault();
        const data = {
            email: this.state.email,
            password: this.state.password
        }
        console.log(data)
        /!*sendFormData(data).then(res=>{
            if(res.status===200){
                alert(res.data);
                this.props.history.push('/');
            }else{

            }
        });*!/
    }*/


    render() {

        const {errors} = this.state;

        return (
            <div className='wrapper'>
                <div className='form-wrapper'>

                    <h2>Create Account</h2>

                    <form onSubmit={this.handleSubmit} noValidate>


                        <div className='email'>
                            <label htmlFor="email">Email</label>
                            <input type='email' name='email' onChange={this.handleChange} noValidate/>
                            {errors.email.length > 0 &&
                            <span className='error'>{errors.email}</span>}
                        </div>

                        <div className='password'>
                            <label htmlFor="password">Password</label>
                            <input type='password' name='password' onChange={this.handleChange} noValidate/>
                            {errors.password.length > 0 && <span className='error'>{errors.password}</span>}
                        </div>

                        <div className='submit'>
                            <button>Create</button>
                        </div>

                    </form>
                </div>
            </div>
        );
    }
}

export default Login2;