陣營 - 終極版：如何讓驗證碼必填字段

在我的反應，終極版的形式，我想打驗證碼必填字段，直到驗證碼響應驗證禁用我的導航欄的組成部分，我發現用JavaScript一些類似的問題，但我沒能來與應用它們，因爲我用的反應，reCAPTCHA的插件：陣營 - 終極版：如何讓驗證碼必填字段

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

這裏是我的回調和verifyCallback方法：

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

謝謝

我加入由Hardik Modha建議的代碼，如下但是仍然有同樣的問題：

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

來源

2017-01-16 METTAIBI

是否使用Redux的形式來處理的形式？ –

沒有我不使用Redux的形式，在用戶填寫的表格，當他點擊下一步，有一個簡單的重定向到下一個頁面。我不甘心，現在覈實的reCAPTCHA在服務器端，只是在我的前端 – METTAIBI

是否使用[反應 - 谷歌 - 驗證碼]（https://www.npmjs.com/package/react-google-recaptcha）的驗證碼？ –

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') 
);

您可以通過道具verifyCallBack到react-recaptcha，在回調函數可以存儲在狀態的響應或哪裏都行。現在，如果響應爲空，您可以簡單地禁用下一個按鈕，或者當用戶單擊驗證時您可以進行驗證。

例如如果您將響應存儲在狀態中，則可以檢查reCaptcha響應是否爲空。

validateForm() { 

    // other field validations.... 

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

編輯：對於編輯的問題，您還可以創建一個狀態變量說btnDisabled，並與真正的初始化。

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

和Next按鈕

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

現在，在validateForm方法，你可以檢查的ReCaptcha響應是否爲空，並根據您可以設置btnDisabled變量設置爲true或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 
     }); 
    } 
}

側面說明：你永遠不應該依賴於客戶端驗證。用戶可以輕鬆繞過客戶端驗證。所以，你也應該實現服務器端驗證。

來源

2017-01-16 16:18:54

upvoted注意到關於CS vs SS驗證 –

感謝您的回答，是否有可能使validateForm返回true，然後在我的disableNext prop中：disableNext = {this.validateForm（）=== false} – METTAIBI

是的，你說得對。如果您的驗證形式返回false，那麼您禁用了'next'按鈕'<按鈕禁用= {！this.validateForm（）}>下一步'。但是，您不應該依賴客戶端驗證。 –

陣營 - 終極版：如何讓驗證碼必填字段

回答

相關問題