Question

我目前在Reactjs表单上进行了验证，该表单在您开始输入时立即验证输入字段，并在您尝试提交时无需填写必填字段时点击onClick。我只是希望它发生在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。

在Reactjs中单击表单验证

1 个答案: