HTML - 表单,两个文本输入。必需的属性。如何,用户必须在两个字段之一中输入字符串才能提交?

发布于 2024-12-25 00:42:45 字数 1001 浏览 1 评论 0原文

我在尝试找到解决方案时遇到了麻烦,而不求助于 php 语句或 javascript。这是因为这个想法看起来很简单,我很确定一定有一种方法可以在不使用两者的情况下做到这一点。

我有一份注册表,该表单上的某些字段是必填项。但我有点左右为难,因为我要求用户输入至少一个电话号码,以便在订单出现问题时可以联系他们。

所以我有3个字段,“电话”“手机”“传真”

我想做的是让用户必须输入电话或手机号码才能完成表格。

但是,我想我的问题是这样的......是否可以以某种方式使用 required 属性,以达到这种效果?

以下是这些字段的 html:

<li>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" value="'.htmlout($phone).'" required aria-required="true" placeholder="0317021101"title="Please enter your home or work number here. You must enter either a phone, or mobile number." maxlength="20"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile" id="mobile" value="'.htmlout($mobile).'" placeholder="0827564829" title="Please enter your mobile number here. You must enter either a mobile, or phone number." maxlength="20"/>
</li>

如果您有帮助,请提供有关此问题的意见或建议,我们将不胜感激,谢谢!

I am having trouble trying to find a solution for this, without resorting to a php statement, or javascript. This is as the idea seems so simple, that i am pretty sure there must be a way to do this without the use of the two.

I have a registration form, and certain fields on this form are required. But i have come to kind of a quandry, because i require the user to enter atleast one phone number, so that they may be contacted incase there is a problem with their order.

So i have 3 fields, "Phone" "Mobile" "Fax"

What i want to do, is make it so the user must enter either a phone, or mobile number in order to complete the form.

But, i guess my question is this... Is it possible to use the required attribute in some way, in order to achieve this effect?

Here is the html for these fields:

<li>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" value="'.htmlout($phone).'" required aria-required="true" placeholder="0317021101"title="Please enter your home or work number here. You must enter either a phone, or mobile number." maxlength="20"/>
</li>
<li>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile" id="mobile" value="'.htmlout($mobile).'" placeholder="0827564829" title="Please enter your mobile number here. You must enter either a mobile, or phone number." maxlength="20"/>
</li>

In assistance, input or advice regarding this would be greatly appreciated, thank you!

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

扫码二维码加入Web技术交流群

发布评论

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

评论(4

西瑶 2025-01-01 00:42:45

有两个电话号码字段(第一个字段是必需的)不是更简单吗?解释似乎说这两个号码都可以是手机号码或其他号码,那么为什么不让它们在结构上对称呢?

第一个可以标记为“主要电话(必需)”,另一个可以标记为“辅助电话(可选)”。这些标签相当长,但根据我的经验,太短的标签(如“电话”和“备用电话”)往往会让一些用户重新输入第一个数字......

Wouldn’t it be simpler to have two phone number fields, the first of them required? The explanations seem to say that either of the numbers can be a mobile number or something else, so why not make them symmetric in structure?

The first could be labeled “Primary phone (required)” and the other “Secondary phone (optional)”. These are rather long for labels, but in my experience, too short labels (like “Phone” and “Alternate phone”) tend to make some users re-type the first number...

病女 2025-01-01 00:42:45

不幸的是,required 仅适用于单个字段,而不适用于字段组(即使它们具有相同的名称),因此无法单独使用 HTML5 验证来实现此目的。

演示:http://jsfiddle.net/ka7kC/

你不应该依赖无论如何,在客户端验证上,您也必须在服务器端进行验证。此外,并非所有浏览器都支持 HTML5 验证。

如果您使用 jQuery,我建议在客户端使用经过验证的验证插件:

Unfortunately, required only works on individual fields and not groups of fields (even if they have the same name), so there is no way to do this with HTML5 validation alone.

Demo: http://jsfiddle.net/ka7kC/

You shouldn't rely on client-side validation anyways, you have to validate on the server side as well. Besides, not all browsers even support HTML5 validation.

If you're using jQuery, I suggest the tried-and-true validation plugin for the client side:

半世晨晓 2025-01-01 00:42:45

如果确实需要,只有服务器端验证脚本可以实际执行它。

Javascript 实际上是执行复杂(即除了模式匹配之外的任何事情)客户端验证的唯一其他选择。

If it's actually required, only a server-side validation script can actually enforce it.

Javascript is really the only other option to do complex (ie. anything more than pattern matching) validation client-side.

夜清冷一曲。 2025-01-01 00:42:45

“required”属性在大多数版本的 IE 和某些版本的 Safari 中不起作用,因此您需要以另一种方式验证您的输入。

The "required" attribute doesn't work in most versions of IE and some versions of Safari so you'd want to validate your input another way.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文