Question

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

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

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

我用

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

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

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

Answer 1

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

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

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

i）Handeling加密/关键事件，以便无法添加输入。

jQuery代码：

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

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

此外，如果您使用如下所示的jQuery UI Datepickers，则可以使用启用和禁用jQuery事件：

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

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

希望，这会有所帮助。

Answer 2

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

来自HTML的WHATWG规范：

如果禁用某个元素，则会禁止其进行约束验证。 (source)

你几乎肯定不想在这里disabled：你想要readonly的行为。从记录该属性的部分：

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

＆＃34;仍在运作＆＃34;包括验证，以及在提交表单时发送的数据的一部分值。