Question

我的问题很简单直接，在接受条款和条件时，需要3次点击才能完成工作。我相信这是因为它选择了日志信息。基本上我只想在输入你的名字时出现注册按钮，然后点击接受。

以下是HTML代码：

<form id="register-form" name="register-form" method="post" action="register.php">
            <div class="rowbox">
                <label for="username">User Name <strong class="Redstar">*</strong>

                </label>
                <input type="text" id="username" name="username" class="txtbar req" tabindex="1">
                <div class="infobox">Not a valid user name!</div>
            </div>
            <div>
                <p class="checkbox"> <strong class="Redstar">*</strong> I Accept VD Loops <a href="termsconditions.html">Terms & Conditions</a>

                </p>
                <input type="checkbox" id="termscons" name="termscons" class="txtbar" tabindex="12">
                <div class="infobox"></div>
            </div>
            <div class="clear3"></div>
            <div class="registerbtn2">
                <input type="submit" value="Register" id="sendbtn" name="sendbtn">
            </div>
        </form>

这是JQuery：

$(document).ready(function () {
// hide send button 
$("#sendbtn").css("display", "none");

$(".txtbar, .txtbox").live("focus click", function () {

    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');
    var pxlchange = '-300px';

    if (currid == "username") {
        pxlchange = '-145px'; }

    rowbox.addClass('colors');

    thelabel.animate({
        left: pxlchange
    }, 350, 'linear', function () {
        // animation complete
    });

    infobox.animate({
        opacity: 1.0
    }, 350, 'linear', function () {
        // animation complete
    });

    $(this).on("change keyup", function () {
        var theval = $(this).val();
        var limitval = 3;
        var checkbox = $('#termscons').is(':checked');
        var replacehtml = "";
        var usernameinfohtml = "Not a valid user name!";

        if (currid == "username") {
            replacehtml = usernameinfohtml;
            limitval = 3; }

        // checking against e-mail regex
        if (currid == "email") {
            if (checkValidEmailAddress(theval)) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (!checkValidEmailAddress(theval)) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }
        } else {
            // we use this logic to check the name field
            if (theval.length >= limitval) {
                infobox.html("Accepted!");
                infobox.addClass('good');
            } else if (theval.length < limitval) {
                infobox.html(replacehtml);
                infobox.removeClass('good');
            }

            if (currid == "termscons") {
                // we use this logic for the check box
                if ($('#termscons').is(':checked')) {
                    infobox.addClass('good');
                } else {
                    infobox.removeClass('good');
                }
            }
        }

        // check if we can display the send button
        if ($('#username').next().hasClass('good') &&
            $('#termscons').next().hasClass('good')) {

            $("#sendbtn").css("display", "block");
        } else {
            $("#sendbtn").css("display", "none");

        }
    });
});

$(".txtbar, .txtbox").live("blur", function () {
    var thelabel = $(this).prev();
    var infobox = $(this).next();
    var rowbox = $(this).parent();
    var currid = $(this).attr('id');

    rowbox.removeClass('colors');

    infobox.animate({
        opacity: 0
    }, 400, 'linear', function () {
        // animation complete
    });
});});

Here is the JSFiddle

Answer 1

我想我找到了它。

在您的脚本中，您有2个听众。

在第二个上，您从第一次点击“导入”$(this) / currid，因此当您点击复选框时，第二个听众$(this).on("change keyup", function () {仍然认为您使用的是用户名。只有在第二次点击后，第一个监听器才会将复选框分配给currid。

检查this，＆amp;看看控制台。

复选框验证问题（点击3次）

1 个答案: