在表单数据与所有验证匹配之前禁用提交按钮？答案

【问题标题】：Disabling the submit button until the form data matches all the validations?在表单数据与所有验证匹配之前禁用提交按钮？
【发布时间】：2018-02-09 12:02:37
【问题描述】：

在使用 JQuery 进行表单验证时，我已对文本字段应用了所有验证，但无法修复提交按钮条件。

提交按钮条件：默认提交按钮为“禁用”。当所有文本字段都匹配所有验证时，应该启用它，但不会发生。我所有的 7 个文本字段在不匹配验证时都设置为“假”，然后它们将变为“真”。

$("#reg_form").submit(function(){

            error_firstName = false;
            error_lastName = false;
            error_emailAdd = false;
            error_pass = false;
            error_confirmPass = false;
            error_mobile = false;
            error_confirmMob = false;

            check_FirstName();
            check_LastName();
            check_email();
            check_password();
            check_confirm_password();
            check_Mobile();
            check_cMobile();

            validate();

            $("#form_firstName,#form_lasttName,#form_email,#form_pass,#form_cPass,#form_mob,#form_cMob").change(validate);

            function validate(){

                if(error_firstName === false && error_lastName === false && error_emailAdd === false && error_pass === false && error_confirmPass === false && error_mobile === false && error_confirmMob === false){
                    $("input[type=submit]").prop("disabled",false);
                    return true;
                }
                else{
                    $("input[type=submit]").prop('disabled',true);
                    return false;
                }   
            }

    });

所以请纠正我并挽救生命，提前谢谢你。

【问题讨论】：

这个#form_lasttName 是否应该包含两个t？
您的活动正在提交中您在提交表单之前没有任何活动???
像这样尝试或条件（error_firstName === false || error_lastName === false）
像console.log("error_firstName=" + error_firstName);这样输出所有错误标志，看看哪个不是假的。

标签： jquery forms

【解决方案1】：

使用 jquery-validation 然后自定义验证更容易更好。示例：

HTML

<form id="form-signin_v1" name="form-signin_v1" method="POST">
    <label>
        Username
        <input name="signin_v1[username]" type="text" data-validation="[NOTEMPTY]">
    </label>
    <label>
        Password
        <input name="signin_v1[password]" type="password" data-validation="[NOTEMPTY]">
    </label>
    <input type="submit" class="ui blue submit button" value="Login">
</form>

javascript

$('#form-signin_v1').validate();

官网：https://jqueryvalidation.org/试试看。

【讨论】：

【解决方案2】：

这可能是最简单的方法，无需使用任何额外的库。我没有测试过代码，但应该不难调整。

$('#reg_form').on('change', 'input', function(){

    // Do your validation on this item
    // On validation add .valid or .invalid classes to the inputs


    // Find all inputs that aren't valid (class .valid) and aren't submit buttons
    var incorrect = $('#reg_form').find('input:not(.valid):not(type="submit")').length;

    // Add/Disable disabled property based on number of incorrect inputs
    $("input[type=submit]").prop("disabled", incorrect > 0);

});

【讨论】：