HTML - Forms, two text inputs. required attribute. How to, user must enter string in either of the two fields to submit?

Question

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!

Answer 1

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...

Answer 2

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:

• http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 3

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.

Answer 4

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