为什么同一输入字段文本中的 `readonly`、`disabled` 和 `required` 无法正常工作？答案

【问题标题】：Why `readonly`, `disabled` and `required` in same input field text is not working properly?为什么同一输入字段文本中的 `readonly`、`disabled` 和 `required` 无法正常工作？
【发布时间】：2017-02-21 16:33:02
【问题描述】：

我正在使用输入文本字段的readonly、disabled 和required 属性，如下所示：

<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" />

我的问题是三个属性中的两个，即 disabled 和 readonly 工作正常，但 required 不工作。提交按钮允许提交，即使它是空的。但是如果我删除readonly表单就不能空提交。

我用

只读因为我正在使用日期选择器并且不允许用户输入日期手册。

已禁用，因为我希望在开始时禁用此输入字段

必需，因为使用必须从日期选择器中选择日期，以便日期不会为空。

【问题讨论】：

澄清一下，预期的行为是无法发送表单，因为有一个无法填充的必填字段？
如果您禁用一个字段，那么它不会提交该字段，这就是您需要的字段不起作用的原因。使用只读且必需。
@AmanRawat 我已经提到“在开始时禁用”，但在提交表单之前没有提到。稍后将在提交表单之前启用输入。
@ÁlvaroGonzález 对不起，我没能找到你。我不明白“无法填充”。
实际发生的情况是，默认情况下，如果字段为只读或禁用，则不会触发 HTML 中的验证。原因很简单，如果该字段为空且属性禁用或只读，并且应用了必需的验证，则表单在任何时候都无法有效。因此，解决方案很冷，例如处理 keyup/keydown 事件，以便无法添加输入并且对于禁用功能，我建议不要在需要之前将日期选择器添加到元素中。希望这会有所帮助。这不是正确的方法，但它会正常工作。

标签： javascript jquery html forms

【解决方案1】：

实际发生的是默认情况下（验证的 HTML 实现），如果字段为只读或禁用，则不会触发 HTML 中的验证。

原因很简单。如果该字段为空且属性已禁用或只读，并且应用了必需的验证，则该表单在任何时候都可能无效。

似乎没有直接和道德的解决方案，但间接解决方案可能是：

i) 处理按键向上/按键向下事件，以便无法添加输入。

jQuery 代码：

$('input').keypress(function(e) {
    e.preventDefault();
});

ii) 对于禁用控制，我建议在您需要之前不要将日期选择器添加到元素中。稍后，您可以在需要时使用 JS 添加它（在您的情况下，在选择列表更改事件上注册 datepicker）。

此外，如果您使用 jQuery UI 日期选择器，您可以使用启用和禁用 jQuery 事件，如下所示：

$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");

如需进一步阅读，您可以查看this 链接。这是关于 Bootstrap 验证的讨论，但它也适用于纯 HTML。

希望，这会有所帮助。

【讨论】：

如果使用只读属性会触发此问题。接下来是我使用只读，因为用户必须从日期选择器中选择日期而不是手动输入。而且我只有一个选项可以使用日期选择器。
只读可以通过处理按键事件来替换。这是我能想到的唯一解决方案：O
分享代码 sn-p，我可能会在上面添加一些 JS 帮助:)
抱歉，代码 sn-p 使问题更复杂。我正在我的项目中间。许多变量和方法是相互关联的。

【解决方案2】：

如果元素是disabled，则在表单验证中将被忽略。

来自 HTML 的 WHATWG 规范：

如果一个元素被禁用，它将被禁止进行约束验证。 (source)

您几乎可以肯定在这里实际上并不想要disabled：您想要readonly 的行为。从记录该属性的部分：

disabled 和readonly 之间的区别在于只读控件仍然可以运行，而禁用的控件通常在启用之前不会作为控件运行。 (source)

“仍在运行”包括验证，以及作为提交表单时发送的数据的一部分的值。

【讨论】：

我完全同意禁用和只读之间的区别。但我需要两者，因为我有<select> 输入，如果用户从<select></select> 选择选项，那么只有用户可以从日期选择器输入日期，即我必须确保第一个用户从<select></select> 输入中选择，然后是文本输入字段。
@KrityShrestha 恐怕你必须用 Javascript 来解决这个问题，而不是 HTML 验证。