javascript - 当 jquery.validate 验证表单时启用提交按钮

Question

我有一个正在使用 jquery.validate 进行验证的表单。 我已经添加到 reCAPTCHA 2.0 中，并且这也正在得到验证。 但是，我希望禁用表单的提交按钮，直到表单有效，这就是我陷入困境的地方。

该按钮已禁用，但在条目和验证码全部验证后并未启用。

这是我的表单代码

    <div class="contact-Form">
        <form id="form">
            <label for="name">Name</label><br>
            <input name="firstname" type="text"  id="firstname" class="inputbox" value="" placeholder="Your name...">
            <br><br>
            <label for="name">Email</label><br>
            <input name="email" type="email" id="email" class="inputbox" value="" placeholder="Your email address...">
            <br><br>
            <label for="name">Message</label><br>
            <textarea class="messagebox" rows="10" cols="20" name="message" id="message" value="" placeholder="Your message..."></textarea>
            <br><br>
            <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
            <div class="g-recaptcha" data-sitekey="6LcjETAUAAAAAPC7-qXZW4xI89k1EhUzPWnD5mAP" data-callback="recaptchaCallback"></div>
            <input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
            <br><br>
            <button id="submit" disabled="disabled" type="submit">Submit</button>
        </form> 
    </div>

还有我的 JavaScript

    $().ready(function() {

 $("#form").validate({
    ignore: ".ignore",
    rules: {
        "firstname": {
            required: true,
            minlength: 3
        },
        "email": {
            required: true,
            email: true
        },
        "message": {
            required: true
        },
        "hiddenRecaptcha": {
            required: function() {
                if(grecaptcha.getResponse() == '') {
                    return true;

                } else {
                    return false;
                }
            }
        }
    },
    messages: {
        "firstname": {
            required: "<br/> You have not entered a name!",
            minlength: "<br/> Your name must consist of atleast 3 characters",
        },
        "email": {
            required: "<br/> You have not entered an email address!",
            email: "<br/> Please use a valid email address!",
        },
        "message": {
            required: "<br/> You have not entered a message!",
        }
    }
});
    $('#form input').on('keyup blur click', function () { // fires on every keyup & blur
            if ($('#form').valid()) {                   // checks form for validity
                $('button.btn').prop('disabled', false);        // enables button
            } else {
                $('button.btn').prop('disabled', 'disabled');   // disables button
            }
    });

});

function recaptchaCallback() {
    $('#hiddenRecaptcha').valid();
};

编辑

我改变了这个功能

$('#form input').on('keyup blur click', function () { // fires on every keyup & blur
            if ($('#form').valid()) {                   // checks form for validity
                $('button.btn').prop('disabled', false);        // enables button
            } else {
                $('button.btn').prop('disabled', 'disabled');   // disables button
            }
    });

至此

$('#form input').bind('keyup blur click', function () { 
            if ($(this).validate().checkForm()) {
                $('#submit').removeClass('button_disabled').attr('disabled', false); // enables button
            } else {
                $('#submit').addClass('button_disabled').attr('disabled', true);   // disables button
            }
    });

现在，当任何输入有效时，它都会启用该按钮。我希望它仅在所有输入有效时启用按钮。

有人可以指出我错在哪里吗？我已经检查了其他帖子，这就是我到目前为止如何设法让这个工作

Answer 1

您可以尝试从输入 btn 中删除禁用属性

示例:

$("button.btn").removeAttr("已禁用");

希望这对您有帮助。