使用jQuery验证多字段：提交按钮禁用逻辑异常问题

Hey there! I see the issue with your current code right away—let's get this fixed so your submit button stays disabled if any field has an error, just like you want.

问题根源 #

Right now, each field's AJAX success callback is independently setting the button's disabled state:

• When the Employee Code checks out, it enables the button even if the Username is invalid
• When the Username checks out, it enables the button even if the Employee Code is invalid

This means as long as one field passes validation, the button becomes usable, which isn't what you need.

解决方案思路 #

We need to track the validation state of both fields separately, then check the combined state every time either field is validated. Only when both fields are valid should we enable the submit button.

修正后的代码 #

$(document).ready(function() {
    // Track validation state for each field
    let isEmpCodeValid = false;
    let isLoginUserValid = false;

    // Function to check overall form validity and update button state
    function checkFormValidity() {
        if (isEmpCodeValid && isLoginUserValid) {
            $('#addEmployee').attr('disabled', false);
        } else {
            $('#addEmployee').attr('disabled', true);
        }
    }

    // Employee Code validation
    $('#EmpCode').keyup(function() {
        $('#ecode').html('Checking availability...');
        var empc = $('#EmpCode').val();
        $.ajax({
            url: '/Admin/Employee/IsEmpCodeExists',
            method: 'post',
            data: { employeecode: empc },
            dataType: 'json',
            success: function(data) {
                if (data == 1) {
                    $('#ecode').html('<font color="red">Employee Code already Exists..</font>');
                    isEmpCodeValid = false;
                } else {
                    $('#ecode').html('');
                    isEmpCodeValid = true;
                }
                // Update button state after changing validation status
                checkFormValidity();
            },
        });
    });

    // Login Username validation
    $('#LoginUser').on('change keyup', function() {
        $('#lusername').html('Checking availability...');
        var lu = $('#LoginUser').val();
        $.ajax({
            url: '/Admin/Employee/IsUserNameExists',
            method: 'post',
            data: { uname: lu },
            dataType: 'json',
            success: function(data) {
                if (data == 1) {
                    $('#lusername').html('<font color="red">User Name already Exists..</font>');
                    isLoginUserValid = false;
                } else {
                    $('#lusername').html('');
                    isLoginUserValid = true;
                }
                // Update button state after changing validation status
                checkFormValidity();
            },
        });
    });

    // Initialize button as disabled on page load
    $('#addEmployee').attr('disabled', true);
});

关键改动说明 #

• Added two state variables (isEmpCodeValid, isLoginUserValid) to track if each field passes validation
• Created a reusable checkFormValidity() function that only enables the button when both fields are valid
• Updated each AJAX success callback to update the corresponding state variable, then call checkFormValidity() to refresh the button state
• Set the button to disabled by default when the page loads (since fields aren't validated yet)
• Fixed a small selector issue: your original code used both $('#addEmployee') and $('.addEmployee') for the button—we standardized it to use the ID selector $('#addEmployee') since the button has an ID

Your submit button will now stay disabled until both the Employee Code and Username are confirmed to be available!

内容的提问来源于stack exchange，提问作者venkat ramana