2017-03-27 7 views
0

私は現在、入力を開始するとすぐに入力フィールドを検証するReactjsフォームと、必要なフィールドに入力しないでsubmitするときにonClickを検証しています。私はちょうどonClickが起こるようにしたい。フォーム検証onClickの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 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()); 
      }); 
    } 
}; 

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

最後に、私がフォームを送信するフォームアクションファイルを持ってここでその上にフォームを持つ成分であります

};

これがバリデータファイルで発生する必要があるかどうかわからないのですか?どんな助けもありがとうございます。ありがとう。

答えて

0

Nevermind。理解した。 onFormChangeはonKeyUpの検証を引き起こしていました。私はちょうどそれを削除し、それはonClickを検証しません。