当我点击发送按钮时，表单验证被绕过

Question

我是 Reactjs 的新手，这是我用它创建的第一个 Web 应用程序，所以这可能只是一个小错误，我会请你帮助我。基本上我正在尝试验证我的表单，但它不起作用。无论我填写表格还是将其留空都没有关系，如果我按下发送按钮，它就会被发送，完全绕过我的验证系统。这是我的表单组件，我正在使用 emailjs 来处理电子邮件发送（它工作得很好）。组件的状态也可以毫无问题地更新，只是验证本身被绕过了。我希望你能帮助我：

class ContactForm extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        fields: { 'user_name': "", 'user_email': "" },
        errors: {}
    };
}

//Functions to handle form validation
handleValidation=()=> {
    let fields = this.state.fields;
    let errors = {};
    let formIsValid = true;

    //Name
    if (!fields["user_name"]) {
        formIsValid = false;
        errors["user_name"] = "Non può essere vuoto!";
        console.log("E' vuoto");
    }

    if (typeof fields["user_name"] !== "undefined") {
        if (!fields["user_name"].match(/^[a-zA-Z]+$/)) {
            formIsValid = false;
            errors["user_name"] = "Inserire solo lettere";
            console.log("Ci sono numeri");
        }
    }

    //Email
    if (!fields["user_email"]) {
        formIsValid = false;
        errors["user_email"] = "Non può essere vuoto!";
    }

    if (typeof fields["user_email"] !== "undefined") {
        let lastAtPos = fields["user_email"].lastIndexOf('@');
        let lastDotPos = fields["user_email"].lastIndexOf('.');

        if (!(lastAtPos < lastDotPos && lastAtPos > 0 && fields["user_email"].indexOf('@@') == -1 && lastDotPos > 2 && (fields["user_email"].length - lastDotPos) > 2)) {
            formIsValid = false;
            errors["user_email"] = "Email non valida";
        }
    }

    this.setState({ errors: errors });
    return formIsValid;
}

handleChange=(field, e)=> {
    let fields = this.state.fields;
    fields[field] = e.target.value;
    this.setState({ fields });
}


sendEmail=(e)=> {
    let submitSuccess = document.getElementById('success');
    let submitFailed = document.getElementById('failed');
    let contactNumber = document.getElementById('contact_number');
    let userName = document.getElementById('user_name');
    let userMail = document.getElementById('user_email');
    let userMessage = document.getElementById('message');


    e.preventDefault();
    
    if (this.handleValidation) {
        //Generate random 5-digit number for the contact number
        contactNumber.value = Math.random() * 100000 | 0;

        emailjs.sendForm(/*Parameters to send email I'm not showing here*/)
            .then((result) => {
                console.log(result.text);
                submitSuccess.style.display = 'block';
            }, (error) => {
                console.log(error.text);
                submitFailed.style.display = 'block';
            })
    } else {
        alert("Ci sono errori nel form");
    };

}

render() {
    return (
        <form className="contact-form" onSubmit={this.sendEmail}>
            <input type="hidden" id="contact_number" name="contact_number" value="" />
            <label style={{ fontSize: '1.3em' }}>Nome</label>
            <input type="text" name="user_name" id="user_name" style={InputFormCSS} onChange={this.handleChange.bind(this, "user_name")} value={this.state.fields["user_name"]} required />
            <label style={{ fontSize: '1.3em' }}>Email</label>
            <input type="email" name="user_email" id="user_mail" style={InputFormCSS} onChange={this.handleChange.bind(this, "user_email")} value={this.state.fields["user_email"]} required />
            <label style={{ fontSize: '1.3em' }}>Message</label>
            <textarea name="message" id="message" style={TextareaFormCSS} required />
            <input type="submit" value="Invia" />
            <p id="success" style={{ display: 'none', backgroundColor: 'green', color: 'white', fontSize: '1.1em', borderRadius: 5, padding: 10 }}>Il messaggio è stato inviato con successo</p>
            <p id="failed" style={{ display: 'none', backgroundColor: 'red', color: 'white', fontSize: '1.1em', borderRadius: 5, padding: 10 }}>Non è stato possibile inviare il messaggio</p>
        </form>


    );
}

}

Answer 1

我通过调用 sendmail 函数中的验证函数作为 if 语句的参数并使用它的布尔返回值解决了这个问题，如下所示：

sendEmail=(e)=> {
let submitSuccess = document.getElementById('success');
let submitFailed = document.getElementById('failed');
let contactNumber = document.getElementById('contact_number');
let userName = document.getElementById('user_name');
let userMail = document.getElementById('user_email');
let userMessage = document.getElementById('message');


e.preventDefault();

if (this.handleValidation() == true) { ...

当我点击发送按钮时，表单验证被绕过

Form validation gets bypassed when I'm hitting the send button

javascript

reactjs

reactjs.net