Question

我再一次拜访了惊人的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 Juru 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函数手动创建了输入元素。这允许我轻松地向项添加事件侦听器，以便我们可以检测用户何时在此字段中键入任何内容。我设置了innerHTML div的botboot来添加标签。然后我appendChild包含我们创建的输入。

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

我知道这段代码有点邋,,但希望你能够更好地完善你的需求，这至少会给你一个起点。

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

1 个答案: