我想在Bootstrap模态框表单中禁用提交按钮，直到 addhostname 与 addipaddress 两个字段都有效。 我尝试了多种方法来检测 addipaddress 字段的有效状态，但都不起作用。 我现有的检查是针对数据库中已存在的重复值，对于这两个字段已经可以工作。

我需要再添加一个隐藏字段来保存 addipaddress 字段的状态吗？这个字段在验证通过时会被设置？并使用 AND 作为二进制值来检测状态？

<!--- script to check hostname is already used --->
<script>
$(document).ready(function() {
    // When user leaves the username input field
    $('#addhostname').focusout(function() {
        var hostname = $(this).val();
        var $thisField = $(this);
        console.log('Validate addhostname');

        // Don't validate empty fields
        if (hostname.length === 0) return;

        // Load up other vars for objects
        const submitBtn = document.getElementById('addhostdatabtn');
        const ipAddress = document.getElementById('addipaddress');

        // AJAX request to backend
        $.ajax({
            url: 'check_hostname.php', // Backend script
            method: 'POST',
            data: { hostname: hostname, },
            success: function(response) {
                var cleanedResponse = response.replace(/[\r\n]+/g, '');
                if (cleanedResponse === 'taken') {
                    // Show error
                    $thisField.addClass('is-invalid');
                    console.log('Validate addhostname - duplicate');
                    // AAAA - Disable submit button
                    submitBtn.disabled = true;
                } else {
                    // Show success/remove error
                    $thisField.removeClass('is-invalid');
                    // $('#username-error').text('');
                    console.log('Validate addhostname - OK');

                    // AAAA - Disable submit button if ip address also invalid
                    // 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('Validate addhostname - ip address valid ' . isInvalid);
                    if (ipAddress.checkValidity() == true)
                    {
                       console.log('Validate addhostname - submit enabled');
                       submitBtn.disabled = false;
                    } else
                    {
                       console.log('Validate addhostname - submit disabled');
                       submitBtn.disabled = true;
                    }
                }
            }
        });
    });
});
</script>

解决方案

看起来你把几件事混淆了。

Built-in HTML validation 使用诸如 required 和 minlength 之类的HTML属性，例如

<input type="text" name="ipaddress" required>
<input type="text" name="name" minlength="10">

有了这些属性，你根本不需要任何Javascript；如果字段的验证结果与属性所规定的条件不符，浏览器会显示错误并拒绝提交表单。

如果你想涉入JS，这种内置验证也会在那些元素上提供诸如 :is-valid 选择器，以及 .checkValidity() 方法，使用内置的验证属性。

但它只对它所支持的少量HTML属性起作用：[这些属性]，如 required、minlength 等等。对于你自己更复杂的验证规则，浏览器无法知道什么是有效的，因此也就不能提供那些方便的 :is-valid 或 .checkValidity()。

所以如果你想要你自己的规则，你需要自己处理。你已经走在正确的路上了，你已经在用你自己的标志保存有效性状态：

$thisField.addClass('is-invalid');

现在只需检查你自己的状态标志：

// Note your code uses 'addipaddress' but that var does not seem to be defined
var isInvalid = ipAddress.classList.contains('is-invalid');

// Or jQuery
// var isInvalid = $('#addipaddress').hasClass('is-invalid');

submitBtn.disabled = isInvalid;

如果你有多个输入都需要有效，你可以遍历它们，执行同样的检查：

let valid = true;
for (const el of [ipAddress, addhostname, ... list of fields]) {
    if (el.classList.contains('is-invalid')) {
        valid = false;
        break;
    }
}

submitBtn.disabled = ! valid;