Reactjs 中的表单验证 onClick

Question

我目前在一个 Reactjs 表单上进行验证，该表单会在您开始输入时验证输入字段，并在您尝试提交它而不填写必填字段时验证 onClick。我只是希望它发生在点击上。这是带有表单的组件：

<form action="" method="post" id="dealersLandingForm">
                <input type="hidden" name="source" id="source"
                    defaultValue={'dealers-landing-' + lotNumber}
                    ref={node => sourceInput = node}
                    />
                <div>
                    <div>
                        {dealersLandingFormError.nameError ?
                            <p className="errorMsgs">{dealersLandingFormError.nameError}</p>
                            : null}
                    </div>
                    <input type="text" id="name" name="name" placeholder="Name"
                        maxLength="25" onChange={ev => {
                            onFormChange(
                                ev,
                                nameInput.value);
                        } }
                        defaultValue={user ? user.firstName : null}
                        className="name form-control"
                        ref={node => nameInput = node}
                        />
                </div>
<button type="submit" className="btn btn-green-gradient btn-large" id="submitBtn" onClick={ev => {
                    onFormSubmit(
                        ev,
                        nameInput.value);
                }}>Request Info
                </button>
            </form>

我还有一个单独的验证器文件：

export const validateDealersLandingForm = dealersLandingForm => {
const dealersLandingFormError = {
    hasErrors: false
};

const nameResults = nameRegex.test(dealersLandingForm.name);

if (!dealersLandingForm.name) {
    dealersLandingFormError.nameError = 'Must have a name.';
    dealersLandingFormError.hasErrors = true;
} else if (dealersLandingForm.name.length < 2) {
    dealersLandingFormError.nameError = 'Must have a full name.';
    dealersLandingFormError.hasErrors = true;
} else if (!nameResults) {
    dealersLandingFormError.nameError = 'Must have an actual name.';
    dealersLandingFormError.hasErrors = true;
}

return dealersLandingFormError;
};

最后，我有一个提交表单的表单动作文件：

export const submitDealersLandingForm = (dealersLandingForm) => {
return (dispatch) => {
    dispatch(pageLoading());

    const jqContactButton = $('#submitBtn');

    const dealersLandingFormError = validateDealersLandingForm(dealersLandingForm);

    if (dealersLandingFormError.hasErrors) {
        return new Promise(resolve => {
            dispatch(validateDealersLandingFormReceiveError(dealersLandingFormError));
            dispatch(pageLoaded());
            jqContactButton.attr('disabled', false).css('opacity', '1');
            resolve();
        });
    } else {
        dispatch(requestSubmitDealersLandingForm());
        jqContactButton.attr('disabled', true).css('opacity', '0.5');
        return dealerFormSubmissionService.submitDealersLandingForm(dealersLandingForm.firstName, dealersLandingForm.lastName, dealersLandingForm.phone,
            dealersLandingForm.email, dealersLandingForm.zipCode, dealersLandingForm.comments, dealersLandingForm.source)
            .then(() => {
                dispatch(receiveSubmitDealersLandingForm());

                send('Dealers Landing', 'Form', 'Form Completion');

                jqContactButton.attr('disabled', false).css('opacity', '1');
                dispatch(pageLoaded());
            })
            .catch(error => {
                logError(error);
                dispatch(receiveSubmitDealersLandingFormError(error));
                jqContactButton.attr('disabled', false).css('opacity', '1');
                dispatch(pageLoaded());
            });
    }
};

};

我不知道这是否需要在验证器文件中发生？任何帮助表示赞赏。谢谢。

Answer 1

没关系。弄清楚了。 onFormChange 导致验证 onKeyUp。我只是将其删除，而不是仅验证 onClick。