Question

I would like to create the following:

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:

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?

Answer 1

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.