in my react-redux form, i want to make recaptcha a required field, and disable my navigation bar ponent until recaptcha response is verified, i found some similar questions with javaScript but i wasn't able to apply them with React, because i am using react-recaptcha plugin :

  <div className="form_wrapper">
  <ReCAPTCHA
            sitekey="xxxxxxxxxxx"
            render="explicit"
            onloadCallback={this.callback}
            verifyCallback={this.verifyCallback}
          />
  </div>
  <NavigationBar
     fields={requiredFields}
    // disableNext={this.props} (here where i make conditions to disable)
    />

here are my callback and verifyCallback methods:

  verifyCallback(response) {
     return response;
 }
 callback() {
console.log('Done !!');
}

thank you

i added the code suggested by Hardik Modha, as follows but still having the same issue:

 <NavigationBar
     fields={requiredFields}
     disableNext={this.props ... && !this.validateForm()} 
    />

 verifyCallback(response) {
this.setState({
  reCaptchaResponse: response,
});
 }

 validateForm() {
if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
  return false;
}
return true;
 }

in my react-redux form, i want to make recaptcha a required field, and disable my navigation bar ponent until recaptcha response is verified, i found some similar questions with javaScript but i wasn't able to apply them with React, because i am using react-recaptcha plugin :

  <div className="form_wrapper">
  <ReCAPTCHA
            sitekey="xxxxxxxxxxx"
            render="explicit"
            onloadCallback={this.callback}
            verifyCallback={this.verifyCallback}
          />
  </div>
  <NavigationBar
     fields={requiredFields}
    // disableNext={this.props} (here where i make conditions to disable)
    />

here are my callback and verifyCallback methods:

  verifyCallback(response) {
     return response;
 }
 callback() {
console.log('Done !!');
}

thank you

i added the code suggested by Hardik Modha, as follows but still having the same issue:

 <NavigationBar
     fields={requiredFields}
     disableNext={this.props ... && !this.validateForm()} 
    />

 verifyCallback(response) {
this.setState({
  reCaptchaResponse: response,
});
 }

 validateForm() {
if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
  return false;
}
return true;
 }

• javascript
• reactjs
• redux
• react-redux
• recaptcha

Share Improve this question Follow edited Jan 16, 2017 at 16:53 moethata asked Jan 16, 2017 at 16:00 moethatamoethata 3,60155 gold badges2525 silver badges3030 bronze badges 4

• Are you using redux-form to handle forms? – Hardik Modha Commented Jan 16, 2017 at 16:05
• no i am not using redux-form, the user is filling the forms and when he click next , there is a simple redirection to the next page. I am not willing for now to verify recaptcha on server side, only in my frontend – moethata Commented Jan 16, 2017 at 16:07
• Are you using react-google-recaptcha for reCaptcha? – Hardik Modha Commented Jan 16, 2017 at 16:09
• no i am using react-recaptcha : github./appleboy/react-recaptcha – moethata Commented Jan 16, 2017 at 16:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

var Recaptcha = require('react-recaptcha');

// specifying verify callback function
var verifyCallback = function (response) {
   this.setState({
        reCaptchaResponse: response
    });
};

ReactDOM.render(
  <Recaptcha
    sitekey="xxxxxxxxxxxxxxxxxxxx"
    render="explicit"
    verifyCallback={verifyCallback}
    onloadCallback={callback}
  />,
  document.getElementById('example')
);

You can pass a prop verifyCallBack to react-recaptcha, in that callback function you can store the response in state or wherever you want. Now, if response is empty you can simply disable the next button or you can put validation when user clicks on validation.

e.g. If you are storing response in state then you can check whether reCaptcha response is empty or not.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    }
}

Edit: For the edited question, You can also create a state variable say btnDisabled and initialize it with true.

constructor() {
     super();
     this.state = {btnDisabled: true};
}

and Next button as

<button disabled={this.state.btnDisabled}>Next</button>

Now, in your validateForm method you can check whether the reCaptcha response is empty or not and based on that you can set the btnDisabled variable to true or false.

validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    } else {
        this.setState({
            btnDisabled: false
        });
    }
}

Side Note: You should never rely on client side validations. User can easily bypass client side validations. So, You should implement server side validations, too.