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

时间:2012-01-04 17:26:54

标签: html forms input required

我无法尝试为此找到解决方案,而无需使用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>

在非常感谢您的帮助,意见或建议,谢谢!

4 个答案:

答案 0 :(得分:3)

拥有两个电话号码字段会不会更简单,第一个是必需的?解释似乎表明,这两个数字中的任何一个都可以是移动数字或其他数字,那么为什么不使它们在结构上对称呢?

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

答案 1 :(得分:2)

不幸的是,required仅适用于单个字段而不适用于字段组(即使它们具有相同的name),因此单独使用HTML5验证无法执行此操作。

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

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

如果你正在使用jQuery,我建议为客户端提供经过验证的验证插件:

答案 2 :(得分:1)

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

Javascript实际上是唯一一个做复杂的选项(即模式匹配以外的任何选项)验证客户端。

答案 3 :(得分:0)

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