primary telephone number with three text field

Question

I would like to create the following:

enter image description here

And I did as follows:

<span>* Primary Phone:</span>
        <input name="prim1" type="text" id="prim1" class="required">
        <input name="prim2" type="text" id="prim2" class="required">
        <input name="prim3" type="text" id="prim3" class="required">

however I get:

enter image description here

I'd like to make the text smaller by specifying the width however it doesn't do that. I also need a way to do the validation for this using jQuery, how can I do it if it's a separate text field?

score 5 · Accepted Answer · answered Sep 10 '11 at 03:52

5

I wouldn't recommend just setting the width on all required fields, I believe you need to update your html to better reflect what you are trying to convey and I wouldn't necessarily do it in the CSS as this is data that should be present even without styling. I would do something like:

<span>* Primary Phone:</span>
<input name="prim1" type="text" id="prim1" size="3" class="required">
<input name="prim2" type="text" id="prim2" size="3" class="required">
<input name="prim3" type="text" id="prim3" size="4" class="required">

Take a look at this for why input size would be acceptable where font size typically isn't.

For more on validation and preventing invalid characters, I would use JQuery Validation or an Autotabber (like http://www.mathachew.com/sandbox/jquery-autotab/) with masking built in.

answered Sep 10 '11 at 03:52

Timothy Strimple

22,920
6
69
76

How do I use jQuery validator for case like this? – adit Sep 10 '11 at 04:05
Take a look at this question where they do something similar for date of birth. http://stackoverflow.com/questions/1289086/jquery-validate-multiple-fields-with-one-error – Timothy Strimple Sep 10 '11 at 04:08
also, how do I post three fields into one POST name? – adit Sep 10 '11 at 07:36
Yup, this works. Thanks for the answer and your time :) – sachin tendulkar Jul 13 '15 at 11:34

score 3 · Answer 2 · edited Jul 22 '12 at 10:05

3

In your css

#prim1, #prim2, #prim3 { width: 50px; display:inline-block; }

The jQuery validation plugin will take care of each element marked 'required'

edited Jul 22 '12 at 10:05

Nikola K.

7,093
13
31
39

answered Sep 10 '11 at 03:41

iCreateAwesome

4,334
1
15
6

Thanks @Joe, It would be best to use ID's for the input fields. – iCreateAwesome Sep 10 '11 at 03:51

score 3 · Answer 3 · edited Jul 22 '12 at 10:05

3

Rather than apply the style to input.required, I'd apply it on the 3 ID's, otherwise every input that has class="required" (which is needed for the validation) will be 50px wide.

#prim1, #prim2, #prim3 { width: 50px; display:inline-block; }

edited Jul 22 '12 at 10:05

Nikola K.

7,093
13
31
39

answered Sep 10 '11 at 03:45

Joe

15,669
4
48
83

Yes, I that would be best. I missed the Id's in the sample code. Nice catch. – iCreateAwesome Sep 10 '11 at 03:49

primary telephone number with three text field

3 Answers3

Linked