自制"Captcha"系统 - javascript中的一个小故障，无法启用提交按钮

Question

所以基本上我想做的是作为安全措施(和学习过程)是我自己的"Capthca"系统。实际情况是，我有20个"标签"(为简洁起见，下面只显示一个)，每个标签的ID在1到20之间。我的javascript随机选择其中一个ID，并使该图片显示为安全代码。每个标签都有自己的值，对应于验证码图像的文本。

同样，我一开始禁用了提交按钮。

我需要帮助的是弄清楚如何启用提交按钮，一旦有人键入适当的值，匹配在HTML标签元素中列出的值。

我已经发布了用户输入值和ID的值，即使它们匹配javascript也不会启用提交按钮。

我觉得这是一个非常非常简单的添加/修复。非常感谢你的帮助!!

HTML代码

    <div class="security">
        <label class="captcha enabled" id="1" value="324n48nv"><img src="images/security/1.png"></label>      
    </div>
    <div id="contact-div-captcha-input" class="contact-div" >
        <input class="field" name="human" placeholder="Decrypt the image text here">
    </div>      
    <input id="submit" type="submit" name="submit" value="Send the form" disabled>

Javascript代码

//Picks random image
function pictureSelector() { 
    var number = (Math.round(Math.random() * 20));
        //Prevents zero from being randomly selected which would return an error
        if (number === 0) {
            number = 1;
        };
    console.log(number);
//Set the ID variable to select which image gets enabled
    pictureID = ("#" + number);
//If the siblings have a class of enabled, remove it
    $(pictureID).siblings().removeClass("enabled");
//Add the disabled class to all of the sibling elements so that just the selected ID image is showing 
    $(pictureID).siblings().addClass("disabled");
//Remove the disabled class from the selected ID
    $(pictureID).removeClass("disabled");
//Add the enabled class to the selected ID
    $(pictureID).addClass("enabled");
};
//Calls the pictureSelector function
pictureSelector();
//Gets the value of the picture value
var pictureValue = $(pictureID).attr("value");
console.log(pictureValue);
//Gets the value of the security input box as the user presses the keys and stores it as the variable inputValue
$("#contact-div-captcha-input input").keyup(function(){
    var inputValue = $("#contact-div-captcha-input input").val();
    console.log(inputValue);
});
console.log($("#contact-div-captcha-input input").val());
//Checks to see if the two values match
function equalCheck() {
    //If they match, remove the disabled attribute from the submit button
    if ($(pictureValue) == $("#contact-div-captcha-input input").val()) {
        $("#submit").removeAttr("disabled");
    } 
};
equalCheck();

这里小提琴

更新# 2

$("#contact-div-captcha-input input").keyup(function(){
    var inputValue = $("#contact-div-captcha-input input").val();
    console.log(inputValue);
    if (pictureValue === inputValue) {
        $("#inputsubmit").removeAttr("disabled");
    } 
});

所以我得到了它的工作99.9%，现在唯一的问题是，如果有人退格或删除正确的值，他们已经输入，提交按钮不然后改变回禁用。指针吗?

Answer 1

已知问题。

给你的按钮一个除了submit以外的名字。该名称干扰了表单的submit。

编辑

请求链接——我没有纯JavaScript的链接，但是jQuery文档确实提到了这个问题:

http://api.jquery.com/submit/

表单及其子元素不应该使用输入名称或id与形式的属性冲突，如submit、length或method。名称冲突可能导致令人困惑的失败。的完整列表要检查这些问题的标记，请参见DOMLint。

编辑2

http://jsfiddle.net/m55asd0v/

• 您将CSS和JavaScript部分颠倒了。该代码从未在JSFiddle中运行过。
你没有重新调用equalCheck。我给你的keyUp处理器添加了一个调用。
• 出于某种原因，你把pictureValue包装在一个jQuery对象中作为$(pictureValue)，这可能不可能完成你想要的。

基本调试101:

• equalCheck中的console.log会显示该函数只被调用了一次。
• 检查您正在比较的值的控制台日志将显示
注意JSFiddle内部奇怪的高亮显示，可能会显示您将代码部分放在错误的类别中。