Formularüberprüfung onClick in Reactjs

Question

Ich habe zur Zeit eine Validierung für ein Reactjs-Formular, das das Eingabefeld überprüft, sobald Sie mit der Eingabe beginnen, und onClick, wenn Sie versuchen, es einzureichen, ohne ein Pflichtfeld auszufüllen. Ich möchte nur, dass es onClick passiert. Hier ist die Komponente, mit der Form darauf:

<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> 

Ich habe auch eine separate Validierer-Datei mit Validierung:

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

Schließlich habe ich eine Form Aktion-Datei, die das Formular ausfüllt:

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

};

Ich kann nicht herausfinden, ob dies in der Validator-Datei passieren muss oder nicht? Jede Hilfe wird geschätzt. Vielen Dank.

Answer 1

Vergesst nicht. Herausgefunden. Der onFormChange verursachte die Validierung onKeyUp. Ich habe es nur entfernt und nicht nur onClick validiert.