Required Fields

Commerce
#1

How do I set the phone number in checkout to be a required field?

#2

Best way would be to create your own shop theme and overwrite the templates you want.

Check out the default template. There you’ll find the field for the phone input. And on that (in your overwrites) you add the required attribute :+1:t2:

1 Like
#3

I’ve got my own theme - is it just a case of remvong ‘.optional’ from the template? as in…

    <div class="c-field {% if error_shipping_phone %}error{% endif %}">
        <label for="address-shipping-phone">{{ lex('commerce.address.phone') }} <small>{{ lex('commerce.address.optional') }}</small></label>
        <input type="text" name="address[shipping][phone]" id="address-shipping-phone" value="{{ address_shipping_phone }}">
        {% if error_shipping_phone %}<span class="c-field-error">{{ error_shipping_phone }}</span>{% endif %}
    </div>
#4

You’ll also want to add phone to the basic address validation module configuration.

2 Likes
#5

You will have to remove the “optional” small label-addition, set the input field as required, and also add that new required-field to the basic address validation module, like Mark mentioned.
Your template should/could look like this:

    <div class="c-field {% if error_shipping_phone %}error{% endif %}">
        <label for="address-shipping-phone">{{ lex('commerce.address.phone') }}</label>
        <input type="text" name="address[shipping][phone]" id="address-shipping-phone" required value="{{ address_shipping_phone }}">
        {% if error_shipping_phone %}<span class="c-field-error">{{ error_shipping_phone }}</span>{% endif %}
    </div>

^ notice the required attribute at the input-field (this is for the frontend-/browser-validation).

1 Like
#6

Adding ‘required’ created a console error when confirming address…

An invalid form control with name='address[shipping][phone]' is not focusable. 
<input type="text" name="address[shipping][phone]" id="address-shipping-phone" required value>

Did I misunderstand?

#7

What’s up with the empty value at the end?

required value>

I think that could be the problem.
The required is correct, as it is, check:

If you want your initial value to be empty, do it like this: value=""

#8

Or actually, leave it as it was before: value="{{ address_shipping_phone }}"
Otherwise the user would loose the input he already provided, if let’s say Commerce sends him back to that page, because the validation on the server-side didn’t go through.

#9

I think that was just a mistake when pasting in here - I’m pretty sure the > was never there or I just left it when deleting the rest of the code.

#10

It does work fine without ‘required’

1 Like
#11

Say… is the input field there hidden? I forgot before, but I think it is normally.
Then you can’t rely on browser-side validation and removing the required is the simple solution.

As long as you have that field in the basic address validation module configuration, it should be okay :slight_smile:

1 Like
#12

Remember that’s the code report from Chrome console, not the way the code actually looked

#13

Yes :slight_smile: And it says:

is not focusable

That is the problem. It is hidden, therefore cannot be focused, and that is invalid for required inputs.