2

我正在为 HTML5 原生表单验证而苦苦挣扎。我对客户端表单验证的理解是您可以手动设置元素的有效性状态setCustomValidity()。但是，这似乎并没有覆盖任何本机验证。

例如，如果我有一个字段，required="required"并且该字段为空，则它是无效的（如预期的那样）。如果我调用setCustomValidity('')该字段，我希望它会覆盖并将其设置为有效，但这不会发生。

novalidate然后我认为当我希望该字段有效时可以动态添加到该字段，但如果我checkValidity()在添加后调用novalidate它仍然返回false。似乎novalidate只允许提交表单而不考虑字段有效性，但仍然考虑该字段:invalid。

我错过了什么，还是这是预期的行为？另外，是否有覆盖任何默认验证并将字段的状态手动设置为:valid？我希望setValidity(true|false)在约束验证 API 中可以使用类似的东西。

更多上下文：

我需要根据另一个字段值切换字段约束。例如，假设我有以下标记：

<form>
    <div>Has Document?</div>
    <input id="hasDocumentYes" type="radio" value="1" required="required"><label for="hasDocumentYes">Yes</label>
    <input id="hasDocumentNo" type="radio" value="0" required="required"><label for="hasDocumentNo">No</label>

    <label for="documentFile">Document File</label>
    <input id="documentFile" type="file">

    <label for="documentType">Document Types<label>
    <select id="documentType"></select>
</form>

如果用户为“有文档？”选择“是”，那么我想要documentFile并且documentType被要求。到目前为止，我唯一可行的解​​决方案是在选择“是”时动态添加required="required"属性，documentFile然后手动调用.documentTypecheckValidity()

这可行，但并不理想。我有很多这些条件验证并不总是像只需要或不需要那么简单。几天来我一直在搜索 google 和 stackoverflow.com，但还没有找到另一个可行的解决方案。

更新

我尝试过的 JS 的简化示例：

// if #documentFile has a required attribute and is empty, the :invalid styles
// are stilled applied after calling setCustomValidity with an empty string
$('#documentFile')[0].setCustomValidity('');

// adding a novalidate dynamically and calling checkValidity() still returns
// false if the field has the required attribute and is empty
$('#documentFile').attr('novalidate', 'novalidate');
$('#documentFile')[0].checkValidity(''); // returns false
4

1 回答 1

0

我认为您的许多问题都可以通过formnovalidate属性解决。有了它，您可以覆盖所需的元素和对输入的其他限制。所以有了这个html：

<input id="documentText" require>

您可以让此脚本使输入有效和无效：

$('#documentText').prop('formnovalidate', true); //input becomes valid over every other rule
$('#documentText').prop('formnovalidate', false); //input becomes invalid if there are any validations

（顺便说一句：novalidate适用于form元素，并将覆盖所有输入的所有验证。）

至于：这里和这里setCustomValidity的规格说：

设置自定义错误，以使元素无法验证。给定消息是向用户报告问题时向用户显示的消息。如果参数是空字符串，则清除自定义错误。

和

元素可以定义自定义有效性错误消息。最初，元素必须将其自定义有效性错误消息设置为空字符串。

（强调我的）

因此，输入的“自定义错误消息”可以是空字符串，在这种情况下，自定义错误消息对输入完全没有影响。或者，它可以是使输入无效并且浏览器应该向用户显示的字符串。

于 2021-04-12T02:34:44.280 回答