Question

我有一个验证年龄的输入字段和一个复选框，当它点击它时会激活表单的＃btn-activation按钮，我想更改我的代码，这样#ttn-activation按钮只有在它们都被激活时才被激活是真的。

复选框：

    $("#ChkTerms").prop('checked', false);
    $("#ChkTerms").click(function () {
        if ($('#ChkTerms').is(":checked")) {
            $("#btn-activation").removeAttr('disabled');
        } else {
            $("#btn-activation").attr("disabled", "disabled");
        }
    });

这里它基本上检查是否检查了#chkTerms，如果是，则从＃btn-activation按钮中删除'disabled'属性。无论年龄验证是否真实。

年龄验证字段

        if (res != null) {
                birth_date = new Date(res[1], res[2] - 1, res[3]);
                birth_date.setFullYear(birth_date.getFullYear() + 18);
                if (birth_date <= new Date()) {
                    $("#btn-activation").removeAttr('disabled');
                    $("#SocialSecurityNumber").removeClass("input-validation-error");
                } else {
                    $("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
                    $("#btn-activation").attr("disabled", "disabled");
                }
            } else {
                $("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
                $("#btn-activation").attr("disabled", "disabled");
            }
    });

在这里你可以看到我的IF语句，如果用户超过18则删除'禁用'，如果没有，则添加'禁用'

现在，如果年龄无效，您可以选中复选框并激活提交按钮，我只希望在这两个语句都为真时激活它。

编辑：

        $("#ChkTerms").prop('checked', false);
    $("#ChkTerms").click(function () {
        if ($('#ChkTerms').is(":checked") && ValidateAge()) {
            $("#btn-activation").removeAttr('disabled');
        } else {
            $("#btn-activation").attr("disabled", "disabled");
        }
    });

    function ValidateAge() {
        $("#SocialSecurityNumber").attr("placeholder", "YYYY-MM-DD-XXXX").blur(function () {
            var str = $('#SocialSecurityNumber').val();
            var res = /^([1-2]\d{3})\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])\-([0-9]{4})$/.exec(str);
            var todays_date = new Date();
            var birth_date = null;

            if (res != null) {
                birth_date = new Date(res[1], res[2] - 1, res[3]);
                birth_date.setFullYear(birth_date.getFullYear() + 18);
                if (birth_date <= new Date()) {
                    //    $("#btn-activation").removeAttr('disabled');
                    $("#SocialSecurityNumber").removeClass("input-validation-error");
                    return true;
                } else {
                    $("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
                    //  $("#btn-activation").attr("disabled", "disabled");
                    return false;
                }
            } else {
                $("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
                //   $("#btn-activation").attr("disabled", "disabled");
                return false;
            }
        });
    }
    return ValidateAge()

Answer 1

这是一个简单的解决方案

将年龄验证代码放在函数ValidateAge()中，根据结果返回true或false，不启用和禁用按钮。并将您的Checkbox点击代码更改为：

$("#ChkTerms").click(function () {
        if ($('#ChkTerms').is(":checked") && ValidateAge()) {
            $("#btn-activation").removeAttr('disabled');
        } else {
            $("#btn-activation").attr("disabled", "disabled");
        }
    });

<强>更新我认为以下列方式改变你的代码对你有用。

$( document ).ready(function() {

  $("#ChkTerms").click(function () {
        if ($('#ChkTerms').is(":checked") && ValidateAge()) {
            $("#btn-activation").removeAttr('disabled');
        } else {
            $("#btn-activation").attr("disabled", "disabled");
        }
    });
});

function ValidateAge() {
var ret = false;
   $("#SocialSecurityNumber").attr("placeholder", "YYYY-MM-DD-XXXX").blur(function () {
      var str = $('#SocialSecurityNumber').val();
      var res = /^([1-2]\d{3})\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])\-([0-9]{4})$/.exec(str);
      var todays_date = new Date();
      var birth_date = null;
      if (res != null) {
        birth_date = new Date(res[1], res[2] - 1, res[3]);
        birth_date.setFullYear(birth_date.getFullYear() + 18);
        if (birth_date <= new Date()) {              
            $("#SocialSecurityNumber").removeClass("input-validation-error");
            ret= true;
        } else {
            $("#SocialSecurityNumber").val("").attr("placeholder", "You need to be 18 years or older.").addClass("input-validation-error");
            ret = false;
        }
     } else {
        $("#SocialSecurityNumber").val("").attr("placeholder", "Invalid date").addClass("input-validation-error");
        ret = false;
    }
  });
return ret;
}

Answer 2

您可以创建验证函数，该函数检查所有内容并在每个事件处理程序中调用它，如果可以的话 - 更改状态。

function validate(res) {
    var birth_date = new Date(res[1], res[2] - 1, res[3]);
    var birth_date.setFullYear(birth_date.getFullYear() + 18);

    return birth_date <= new Date() && $('#ChkTerms').is(":checked");
}

if (validate(res)) {
    $("#btn-activation").removeAttr('disabled');
}

主动提交按钮与两个圣

2 个答案: