active submit button with two st

Question

I have a input field that validates age and a checkbox that when its clicked it activates the #btn-activation button for the form, i want to change my code so the #btn-activation button only gets activated when both of them are true.

Checkbox:

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

Here it basically checks if #chkTerms is checked or not, and if it is it remove the 'disabled' attribute from #btn-activation button. Regardless of if the age validation are true or not.

Age validate field

        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");
            }
    });

Here you can see my IF statements, if user is over 18 it removes 'disabled', if not it adds 'disabled'

Right now if age is invalid, you can check the checkbox and the submit button gets activated, i only want it to get activated when both of these statements are true.

EDIT:

        $("#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

Here is a simple solution

Put your age validation code in function say ValidateAge(), that returns true or false based on results and doesn't enable and disable your button. And change your Checkbox click code to:

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

UPDATE I think changing your code a bit in the following way would work for you.

$( 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

You can create validate function which checks everything and call it in every event handler, if all right - change the state.

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');
}