0

Im validating the email in my form with jquery 3.3.1 , but when i tried to remove the disabled attribute from the form submit button, it doesnt do anything... i mean, it only disable the button if the response is true.. but when the response is false, it doesnt remove the attribute. also it doesnt change the css color to green... the password matcher works fine, but the email its not going anywhere sadly. any chance to help me to see whats wrong here?

this is the code

    $(document).ready(function () {
    $('#registerform').validate();
    $('#password, #confirmpassword').on('keyup', function () {
        if ($('#password').val() == $('#confirmpassword').val()) {
            $('#alertPassword').html('<li><i class="fa fa-check text-success"></i>&nbsp; Password matching</li>').css('color', 'green');
            $("#submitsn").attr("disabled", false);
        } else {
            $('#alertPassword').html('<li><i class="fa fa-times text-success"></i>&nbsp; Password not matching</li>').css('color', 'red');
            $("#submitsn").attr("disabled", true);
        }
    });
    $("#email").live("blur", function (e) {
        $("#alertBadgeemail").hide();
        if ($("#email").val() == null || $("#email").val() == "") {
            $("#alertBadgeemail").show();
            $("#submitsn").attr("disabled", false);
            $("#alertBadgeemail").html("Email is required field.").css("color", "red");
        } else {
            $.ajax({
                type: "POST",
                url: "check-email.sn",
                data: $('#registerform').serialize(),
                dataType: "html",
                cache: false,
                success: function (msg) {
                    $("#alertBadgeemail").show();
                    $("#alertBadgeemail").html(msg).css("color", "red");
                    $("#submitsn").attr('disabled', 'disabled');
                },
                error: function (msg) {
                    $("#alertBadgeemail").show();
                    $("#alertBadgeemail").html(msg).css("color", "green");
                    $("#submitsn").removeAttr('disabled', 'disabled');
                }
            });
        }
    });
});
EzzeOnursito
  • 83
  • 8
  • [Disabled](https://www.w3schools.com/jsref/prop_pushbutton_disabled.asp) is a property. Try `$("#submitsn").prop("disabled", false);` – PoorlyWrittenCode Sep 28 '20 at 09:41
  • `.live` is a deprecated infact removed from jQuery since 1.9 do NOT use that at all - also please post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). – Always Helping Sep 28 '20 at 09:41

2 Answers2

0

in bootstrap4 disable is a class value so you must remove it from class attribute:

$("#submitsn").removeClass('disabled');

and maybe you add disable attribute so you must remove it too:

$("#submitsn").removeAttr('disabled');
Mehrzad Tejareh
  • 635
  • 5
  • 21
-1

You are not using .removeAttr properly. It has only one parameter. Please check next link:

https://www.w3schools.com/jquery/html_removeattr.asp

$("#submitsn").removeAttr('disabled');

also, I am not sure chaining will work for changing color. I would rather do something like this:

var emailBadge = $("#alertBadgeemail");
emailBadge.show();
emailBadge.html(msg); //check is msg string or object
emailBadge.css("color", "green");

General advise is to try to avoid repeating selectors, this might affect browser performances.

Zoran Stankovic
  • 148
  • 7
  • This is kind of a hack solution, since disabled is a [property, not a attribute](https://stackoverflow.com/questions/16051491/difference-between-prop-and-attr-in-jquery-and-when-to-use-attr-and-prop). Also chaining is more efficient than than creating a variable and calling methods separately, so the second part of you answer isn't really best practice. – PoorlyWrittenCode Sep 28 '20 at 09:53