有条件必填字段和禁用输入

发布于 2024-09-14 03:51:35 字数 598 浏览 4 评论 0原文

我的表单有一堆地址字段（街道、城市、国家、省、邮政编码），需要一遍又一遍地填写。为了让用户更容易，我添加了一个“复制来源”选择器，他们可以在其中选择以前使用过的地址。当他们这样做时，表单字段会自动填充，然后被禁用。这样他们就可以清楚地看到他们要提交的内容。

问题是，如果禁用这些字段，W3 会说输入将不会被提交。那很好，因为我可以从选择器中获取所需的所有数据，只是现在表单验证失败。

我想我有两个选择：

在提交表单之前重新启用表单字段（但这有点黑客行为）
将所有地址字段设为可选。但是然后我需要添加一堆 clean_ 方法，以确保当您不使用预设选择器时它们实际上被填充。另外，我在整个网站上都使用地址表单，并且在某些地方确实需要它们，因此我不想将这些字段设为可选。不过，我想我可以复制粘贴地址表单并为此页面制作一个特例。

想法？我应该采取什么方法？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

淡莣 2024-09-21 03:51:35

有几点想法。他们可能会给你一些想法。

如果用户使用之前使用过的地址并且无法编辑表单（字段被禁用），那么他们是否需要地址表单？您能否在没有表单的情况下不显示先前的地址并将对其的引用作为隐藏参数传递？
如果用户可以编辑之前选择的地址（我认为亚马逊会这样做），那么让表单字段保持可编辑是否有意义？

回复收藏 0 原文

小瓶盖 2024-09-21 03:51:35

我一直面临类似的问题，其中需要字段，但它们的值是从另一种表单中获取的。我决定执行以下操作：

为所有需要但不需要手动输入的输入分配一个类
创建一个自动禁用键盘或上下文菜单中所有用户输入的函数

这是我的解决方案：
带有表单的 HTML 文件

<head>
<script src='file1.js'></script>
</head>

<body>
<form method='post'>
<input class='RequiredNoManual'>
<input type='submit'>
</form>

</body>
</html>

JS 文件

window.addEventListener('load', configureNoManualInputFields);
function configureNoManualInputFields()
{
    var elements = document.getElementsByClassName('RequiredNoManual');
    for(var i =0; i<elements.length; i++)
    {
        elements[i].oncut = function(){event.preventDefault();};
        elements[i].oncopy = function(){event.preventDefault();};
        elements[i].onkeydown = function(){event.preventDefault();};
        elements[i].onkeypress = function(){event.preventDefault();};
        elements[i].setAttribute('required', 'required');
    }

}

I've been facing a similar problem, where fields are required but their values are fetched from another form as such. What I decided to do is the following:

Assign a class to all the inputs that are required but do not require a manual input
Create a function that automatically disables all user input from the keyboard or context menu

Here's my solution:
HTML FILE WITH FORM

<head>
<script src='file1.js'></script>
</head>

<body>
<form method='post'>
<input class='RequiredNoManual'>
<input type='submit'>
</form>

</body>
</html>

JS FILE

window.addEventListener('load', configureNoManualInputFields);
function configureNoManualInputFields()
{
    var elements = document.getElementsByClassName('RequiredNoManual');
    for(var i =0; i<elements.length; i++)
    {
        elements[i].oncut = function(){event.preventDefault();};
        elements[i].oncopy = function(){event.preventDefault();};
        elements[i].onkeydown = function(){event.preventDefault();};
        elements[i].onkeypress = function(){event.preventDefault();};
        elements[i].setAttribute('required', 'required');
    }

}

回复收藏 0 原文

~没有更多了~