表單驗證onClick in Reactjs

我目前已對Reactjs表單進行驗證，該表單在您開始鍵入時立即驗證輸入字段，並在嘗試提交時未驗證填寫必填字段時驗證onClick。我只是想讓它發生onClick。這裏是它與形式的組件：表單驗證onClick in Reactjs

<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()); 
      }); 
    } 
};

};

如果這需要在驗證器文件中發生，我無法確定它嗎？任何幫助表示讚賞。謝謝。

來源

2017-03-27 UTvolfan85

沒關係。弄清楚了。 onFormChange導致驗證onKeyUp。我只是刪除它，而不是它只是驗證onClick。

來源

2017-03-27 18:32:55 UTvolfan85

表單驗證onClick in Reactjs

回答

相關問題