javascript - 如何集成BotBoot验证码并禁用提交按钮，直到验证码正确为止？

我再次呼吁令人惊叹的JavaScript Guru Masters！
由于我再次失败，请注意我的电话〜

因此，我使用的是BotBoot JavaScript Captca，它会显示“您是人类吗？6 + 8 =吗？”题。我希望禁用提交按钮，直到recaptca通过。

所以我的botboot.js文件如下所示：

var a = Math.ceil(Math.random() * 10);
var b = Math.ceil(Math.random() * 10);
var c = a + b;
function DrawBotBoot()
{
    document.write("<label for='botboot' class='contact_label'>What is "+ a + " + " + b +"?</label>");
    document.write("<input name='botboot' id='BotBootInput' type='number' class='input_field' maxlength='2' size='2' required>");
}
function ValidBotBoot(){
    var d = document.getElementById('BotBootInput').value;
    if (d == c) return true;
    return false;
}

我的形式是这样的：

<script src="js/botboot.js"></script>
<form action="send-mail.php" class="contact" method="post" parsley-validate>
    <label for="name" class="contact_label">Name</label>
    <br>
    <input name="name" type="text" class="input_field" required><br>

    <label for="email" class="contact_label">Email</label>
    <br>
    <input name="email" type="email" class="input_field" parsley-trigger="blur" parsley-focus="first" required><br>

    <label for="phone" class="contact_label">Phone</label>
    <br>
    <input name="phone" type="tel" class="input_field" parsley-trigger="change"><br>

    <label for="message" class="contact_label">Message</label>
    <br>
    <textarea name="message" class="input_field_message" parsley-trigger="keyup" parsley-rangelength="[20,200]" parsley-focus="last" required></textarea><br>

    <script>DrawBotBoot()</script><br>

    <submit class="btn btn-lg btn-default cta">Submit</submit>
</form>

感谢您的时间，技能和脑力JavaScript大师！

最佳答案

我已经修改了您的代码的一部分以使其正常工作。可以在http://jsfiddle.net/QVXS3/1/上找到有效的JSFiddle。

我修改的代码的第一部分是HTML（主要用于JSFiddle目的）。

<div id="botboot"></div>
<input type="submit" id="form_submit" class="btn btn-lg btn-default cta" name="Submit" disabled>
<script>DrawBotBoot()</script><br>

这将创建一个放置BotBoot的容器，并且我将Submit按钮更改为常规输入类型，因此disabled属性将起作用。

下一部分是JavaScript。

function DrawBotBoot() {
    var div = document.getElementById('botboot');
    var input = document.createElement('input');
    input.name = 'botboot';
    input.id = 'BotBootInput';
    input.type = 'number';
    input.class = 'input_field';
    input.setAttribute('maxlength','2');
    input.setAttribute('size','2');
    input.setAttribute('required','required');
    input.addEventListener('keyup',ValidBotBoot,false);
    div.innerHTML += "<label for='botboot' class='contact_label'>What is "+ a + " + " + b +"?</label>";
    div.appendChild(input);
}
function ValidBotBoot(e) {
    var submit = document.getElementById('form_submit');
    var d = e.target.value;
    if (d == c) {
        submit.removeAttribute('disabled');
        return true;
    }else{
        submit.setAttribute('disabled','disabled');
    }
    return false;
}

我使用createElement功能手动创建了输入元素。这使我可以轻松地向项目添加事件侦听器，以便我们可以检测到用户何时在此字段中键入任何内容。我设置innerHTML div的botboot添加标签。然后，我appendChild包括我们创建的输入。

在ValidBotBoot的内部，我添加了e参数以捕获所传递的事件详细信息。现在，d变量是事件目标值的变量。我们还必须通过以form_submit为ID的元素来获取提交按钮。如果变量d == c，我将禁用禁用的属性。

我知道这段代码有点草率，但是希望您可以对其进行完善以更好地满足您的需求，并且这将至少为您提供一个起点。