Bootstrap模态框表单：双字段有效才启用提交按钮，IP字段检测失败

我在Bootstrap模态框的表单里想实现只有当addhostname和addipaddress两个字段都验证通过时才启用提交按钮，但试了好几种方法检测addipaddress字段的有效性都失败了。目前已经完成了数据库重复值的检查，这个检查对两个字段都有效。想问下是不是需要新增一个隐藏字段来存储addipaddress的验证状态，再用二进制AND运算来判断整体状态？

现有代码 #

<!--- 检查hostname是否已被使用的脚本 --->
<script>
$(document).ready(function() {
    // 用户离开hostname输入框时触发
    $('#addhostname').focusout(function() {
        var hostname = $(this).val();
        var $thisField = $(this);
        console.log('验证addhostname');

        // 空字段不验证
        if (hostname.length === 0) return;

        // 获取相关元素
        const submitBtn = document.getElementById('addhostdatabtn');
        const ipAddress = document.getElementById('addipaddress');

        // 向后端发送AJAX请求
        $.ajax({
            url: 'check_hostname.php', // 后端验证脚本
            method: 'POST',
            data: { hostname: hostname, },
            success: function(response) {
                var cleanedResponse = response.replace(/[\r\n]+/g, '');
                if (cleanedResponse === 'taken') {
                    // 显示错误状态
                    $thisField.addClass('is-invalid');
                    console.log('验证addhostname - 已存在重复值');
                    // 禁用提交按钮
                    submitBtn.disabled = true;
                } else {
                    // 移除错误状态
                    $thisField.removeClass('is-invalid');
                    console.log('验证addhostname - 验证通过');

                    // 尝试判断IP地址是否有效（以下方法均失败）
                    // var isValid = $('#addipaddress').checkValidity();        nope
                    // var isValid = addipaddress.checkValidity();              nope
                    // var isInvalid = $('#addipaddress').is(':invalid');       nope
                    var isInvalid = addipaddress.is(':invalid');a               // nope（存在语法错误）
                    console.log('验证addhostname - IP地址有效性：' . isInvalid);
                    if (ipAddress.checkValidity() == true)
                    {
                       console.log('验证addhostname - 启用提交按钮');
                       submitBtn.disabled = false;
                    } else
                    {
                       console.log('验证addhostname - 禁用提交按钮');
                       submitBtn.disabled = true;
                    }
                }
            }
        });
    });
});
</script>

完全不用搞隐藏字段和二进制运算，逻辑太绕了。问题出在你对addipaddress的有效性检测方式，以及没有统一的验证逻辑，下面是具体修正方案：

1. 修正IP字段的有效性检测 #

你代码里有语法错误（addipaddress.is(':invalid');a多了个多余的a），而且要区分原生DOM元素和jQuery对象的方法：

• 如果你用document.getElementById('addipaddress')拿到的原生DOM元素，直接用ipAddress.checkValidity()是正确的，但前提是这个字段要有HTML5验证规则（比如IP格式的pattern属性）。
• 如果你用jQuery选择器$('#addipaddress')，要转成原生元素再调用方法：$('#addipaddress')[0].checkValidity()，因为.checkValidity()是原生DOM的验证方法，jQuery对象不能直接调用。

2. 封装统一的验证函数 #

把判断两个字段是否都有效的逻辑抽成单独函数，不管是addhostname验证完成，还是addipaddress输入变化，都调用这个函数更新提交按钮状态，避免重复代码。

修改后的完整代码 #

$(document).ready(function() {
    // 封装统一验证函数：判断两个字段是否都有效，更新提交按钮状态
    function updateSubmitButtonStatus() {
        const submitBtn = document.getElementById('addhostdatabtn');
        // 判断hostname是否有效：无错误类名且不为空
        const isHostnameValid = !$('#addhostname').hasClass('is-invalid') && $('#addhostname').val().trim().length > 0;
        // 判断IP是否有效：用原生验证方法，前提是字段有HTML5验证规则
        const isIpValid = $('#addipaddress')[0].checkValidity();
        
        // 两个都有效才启用按钮
        submitBtn.disabled = !(isHostnameValid && isIpValid);
    }

    // 监听hostname失焦，检查数据库重复
    $('#addhostname').focusout(function() {
        const hostname = $(this).val().trim();
        const $thisField = $(this);
        console.log('验证addhostname');

        if (hostname.length === 0) {
            $thisField.removeClass('is-invalid');
            updateSubmitButtonStatus();
            return;
        }

        $.ajax({
            url: 'check_hostname.php',
            method: 'POST',
            data: { hostname: hostname },
            success: function(response) {
                const cleanedResponse = response.replace(/[\r\n]+/g, '');
                if (cleanedResponse === 'taken') {
                    $thisField.addClass('is-invalid');
                    console.log('验证addhostname - 已存在重复值');
                } else {
                    $thisField.removeClass('is-invalid');
                    console.log('验证addhostname - 验证通过');
                }
                // 验证完成后更新按钮状态
                updateSubmitButtonStatus();
            }
        });
    });

    // 监听IP字段的输入/失焦事件，实时验证
    $('#addipaddress').on('input focusout', function() {
        updateSubmitButtonStatus();
    });
});

3. 补充HTML验证规则 #

要给addipaddress字段加上HTML5验证规则，比如IPV4的格式验证，这样checkValidity()才能正确判断：

<input type="text" id="addipaddress" 
       pattern="^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$" 
       placeholder="输入IP地址"
       required>

核心思路 #

直接通过is-invalid类名判断hostname的后端验证结果，通过原生checkValidity()判断IP的前端格式验证结果，两者都通过就启用提交按钮，逻辑清晰且易维护，完全不需要隐藏字段和二进制运算。

内容的提问来源于stack exchange，提问作者Robert Osbourne