javascript - 如何集成 BotBoot 验证码并在验证码正确之前禁用提交按钮？

Question

我再次拜访了不起的 JavaScript 大师!又失败了，请听我的号召~

所以我正在使用 BotBoot JavaScript Captca，它执行“你是人类吗？6 + 8 =？”问题。我希望在 recaptca 通过 true 之前禁用提交按钮。

所以我的 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 Guru Masters 的时间、技能和脑力!

Answer 1

我已经修改了您的代码的几个部分以使其正常工作。可以在 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 的容器，我将提交按钮更改为普通输入类型，以便 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 函数手动创建了输入元素。这使我可以轻松地向该项目添加一个事件监听器，以便我们可以检测用户何时在此字段中键入任何内容。我设置了 botboot div 的 innerHTML 来添加标签。然后我 appendChild 包含我们创建的输入。

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

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