HTML5 验证约束 - setCustomValidity 和 novalidate答案

【问题标题】：HTML5 Validation Constraint - setCustomValidity and novalidateHTML5 验证约束 - setCustomValidity 和 novalidate
【发布时间】：2021-04-12 10:34:44
【问题描述】：

我正在为 HTML5 原生表单验证而苦苦挣扎。我对Client-side form validation 的理解是您可以使用setCustomValidity() 手动设置元素的有效性状态。但是，这似乎不会覆盖任何本机验证。

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

然后我想当我希望该字段有效时，我可以动态地将novalidate 添加到该字段，但如果我在添加novalidate 后调用checkValidity()，它仍然返回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 和documentType，然后手动调用checkValidity()。

这可行，但并不理想。我有很多这些条件验证并不总是像只需要或不需要那么简单。我已经在 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

【问题讨论】：

请同时包含您尝试过的 JavaScript。
@imvain2 是的，我目前正在动态添加/删除required 属性，如问题中所述。但是，正如还解释的那样，这是一个简化的示例，我有许多要应用的条件验证（即min、max、pattern 等）。我试图避免为每个表单编写一堆自定义 JS，这就是为什么我要问我是否遗漏了什么或有其他方法。

标签： javascript html5-formvalidation constraint-validation

【解决方案1】：

我认为您的许多问题都可以通过 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：规格here 和here 说：

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

和

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

（强调我的）

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

【讨论】：