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

Posted 2023-05-09

【中文标题】当 jquery.validate 验证表单时启用提交按钮

【英文标题】：enable submit button when jquery.validate has valiated the form

【发布时间】：2018-02-19 12:23:45

【问题描述】：

我有一个正在使用 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
            
    );

它现在在任何输入有效时启用按钮。我希望它只在所有输入都有效时才启用按钮。

有人能指出我哪里出错了吗？

【参考方案1】：

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

示例：

$("button.btn").removeAttr("disabled");

希望对你有所帮助。

【讨论】：

嗨，我认为这是在这段代码中完成的 $('#form input').on('keyup blur click', function () // 在每个 keyup 上触发 & blur if ($ ('#form').valid()) // 检查表单的有效性 $('button.btn').prop('disabled', false); // 启用按钮 else $('button.btn' ).prop('disabled', 'disabled'); // 禁用按钮 ); );