javascript - 自制 "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();

更新

Fiddle here

更新#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 的名称。该名称会干扰表单的提交。

编辑

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

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

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

编辑 2

http://jsfiddle.net/m55asd0v/

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

基本调试101:

• equalCheck 中的 console.log 会向您显示该函数仅被调用一次。
• 检查您比较的值的控制台日志会显示 你有错误的值(value)。
• 基本注意 JSFiddle 内部奇怪的突出显示会表明您的代码部分属于错误的类别。