Skip to main content

Because I used a similar address model to the one supplied in the Craft Commerce templates, which essentially uses the same form partials for both address and billing, and also hides and shows the form using JavaScript, I can't use HTML required attributes.

Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>
<div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
    <h3 class="small">Contact details</h3>
    <div class="inputWrap">
        <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="{{ modelName }}-phone">Telephone number</label>
        <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
    </div>
    <p class="footnote">In case we need to contact you about important details regarding your order.</p>
</div>

Because I used a similar address model to the one supplied in the Craft Commerce templates, which essentially uses the same form partials for both address and billing, and also hides and shows the form using JavaScript, I can't use HTML required attributes.

Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>

Because I used a similar address model to the one supplied in the Craft Commerce templates, which essentially uses the same form partials for both address and billing, and also hides and shows the form using JavaScript, I can't use HTML required attributes.

Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

<div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
    <h3 class="small">Contact details</h3>
    <div class="inputWrap">
        <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
        <span class="highlight"></span>
        <span class="bar"></span>
        <label for="{{ modelName }}-phone">Telephone number</label>
        <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
    </div>
    <p class="footnote">In case we need to contact you about important details regarding your order.</p>
</div>
added 2 characters in body; edited title
Source Link
Brad Bell
  • 67.6k
  • 6
  • 75
  • 145

craft Craft Commerce: make address phone telephone field required without javascriptJavaScript

Because I used a similar address model to the one supplied in the craft commerceCraft Commerce templates (which, which essentially uses the same form partials for both address and billing, and also hides and shows the form using javascriptJavaScript, I can't use htmlHTML required attributes. Is

Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>

craft Commerce: make address phone telephone field required without javascript

Because I used a similar address model to the one supplied in the craft commerce templates (which essentially uses the same form partials for both address and billing, and also hides and shows the form using javascript, I can't use html required attributes. Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>

Craft Commerce: make address phone telephone field required without JavaScript

Because I used a similar address model to the one supplied in the Craft Commerce templates, which essentially uses the same form partials for both address and billing, and also hides and shows the form using JavaScript, I can't use HTML required attributes.

Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>
Source Link
ToddPadwick
  • 364
  • 1
  • 12

craft Commerce: make address phone telephone field required without javascript

Because I used a similar address model to the one supplied in the craft commerce templates (which essentially uses the same form partials for both address and billing, and also hides and shows the form using javascript, I can't use html required attributes. Is there an easy way to add in the config files a way to make 'shipping.phone' required and return an error in the same way the default required fields work?

    <div class="inputGroup{% if model and model.hasErrors('phone') %} error{% endif%}">
        <h3 class="small">Contact details</h3>
        <div class="inputWrap">
            <input type="text" id="{{ modelName }}-phone" class="u-full-width" name="{{ modelName }}[phone]" value="{{ model ? model.phone : '' }}">
            <span class="highlight"></span>
            <span class="bar"></span>
            <label for="{{ modelName }}-phone">Telephone number</label>
            <span class="flash">{% if model and model.hasErrors('phone') %}{{ model.getError('phone') }}{% else %}Required{% endif %}</span>
        </div>
        <p class="footnote">In case we need to contact you about important details regarding your order.</p>
    </div>