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中删除disabled属性

示例：

$（ “button.btn”）removeAttr（ “无效”）;

希望这会对你有所帮助。

当jquery.validate使表单有效时启用提交按钮

1 个答案: