HTML:发布空白/禁用表单元素的最佳做法
我有一个表单用作数据库记录CRUD的接口。表单中的某些元素是相互依赖的,因此如果一个字段的值为X,则其他字段应由用户填写并填写。HTML:发布空白/禁用表单元素的最佳做法
一个简单的例子可能是这样的一个个人信息部分:
<select name="relationship-status">
<option value="single">Single</option>
<option value="married">Married</option>
</select>
<input type="text" name="spouse-first-name" />
<input type="text" name="spouse-last-name" />
...其中字段如果relationship-status
设置为married
spouse-first-name
和spouse-last-name
会被要求,将被禁用(或隐藏)除此以外。
我的问题是,在这个例子中,当一个人从结婚变为单身,并且想要更新他们的数据时,我们也想清除配偶名称值并将其发送回服务器,使得值在数据库中清除。当他们更改为single
时,我们可以使用JavaScript来清除它们的字段,但如果我们禁用表单元素以便它们不能编辑它们,那么当表单提交时它们不会被POST。
我能想到以下解决方案:
我们可以让他们
readonly
,而不是disabled
,但该方法只适用于某些表单控件(具体而言,它并不适用于其他select
元素工作),所以这不是一个选项。我们可以复制这些字段作为
hidden
输入,将与形式发布的,而不是由用户可编辑的,但是这似乎是这样的黑客。我们也可以在提交之前启用禁用的字段,然后再重新禁用它们。这是我现在使用的方法,但我觉得我错过了一些东西,而且必须有更好的方法。
有什么我没有想到的,或者实现两者的更明智方式:
- 没有允许用户编辑字段,
- 允许该字段的值即使空白,也可以使用表单发布。
我发现最稳健和最不灵活的解决方案是对<select>
以外的所有元素使用readonly
属性。对于<select>
元素,我只是禁用<option>
子元素,目前未选中。这有效地防止了用户改变值。然后,我将<select>
的颜色变为灰色背景以禁用,以完成错觉。在这一点上,所有的表单元素都将随表单一起发布,即使没有值,也不管它们是否“禁用”。
我的建议是,除了在客户端进行验证之外,在javascript中添加函数form.submit(),如果有人禁用了JS,将无法提交表单,除了同意与其他评论一起,添加服务器验证。
您应该努力在服务器端强制执行数据有效性。这意味着当有人将状态更改为“单个”时,配偶名称应由服务器清除,而不管POST值如何。 – 2012-04-17 19:18:22
同意。客户端验证是为了制作更好的用户界面。 *服务器端*验证是为了执行数据完整性和业务规则。 – David 2012-04-17 19:19:43
谢谢你们,我可能会这样做是出于其他原因;然而,它并没有真正回答我提出的问题。还有其他的场景,服务器验证根本没有帮助。 – FtDRbwLXw6 2012-04-17 19:36:42