Craft Commerce: make address phone telephone field required without JavaScript

Question

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>

Answer 1

The way to do address validation with Commerce in gneral is using a plugin and listening to the onBeforeSaveAddress event.

Set up a listener with something like this:

    craft()->on('commerce_addresses.onBeforeSaveAddress',
        [
            craft()->businessLogic_logic,
            'onBeforeSaveAddressHandler'
        ]
    ); 

And here's an example of a function that does some validation:

public function onBeforeSaveAddressHandler($event){

    $address = $event->params['address'];

    if(!$address->firstName){
        $address->addError('firstName','First name must not be empty');
        $event->performAction = false;
    }
    if(!$address->lastName){
        $address->addError('lastName','Last name must not be empty');
        $event->performAction = false;
    }
    if(!$address->phone){
        $address->addError('phone','Phone number must not be empty');
        $event->performAction = false;
    }
    if(!$address->address1){
        $address->addError('address1','Street Address line 1 must not be empty');
        $event->performAction = false;
    }
    if(!$address->city){
        $address->addError('city','Suburb must not be empty');
        $event->performAction = false;
    }
    if(!$address->zipCode){
        $address->addError('zipCode','Postcode must not be empty');
        $event->performAction = false;
    }     
    if(!$address->countryId){
        $address->addError('countryId','Country ID must not be empty');
        $event->performAction = false;
    }          
}

Answer 2

You could just create javascript/jQuery validation for your form(s). And whenever the form is submitted or the submit button clicked, validate your fields however you like, and don't submit if they're invalid.

This avoids a trip to the server, so it's also faster and a better UX for users. Of course it wouldn't provide any server side validation, or admin validation. But if all you care about is people not submitting orders without a phone number, it should suffice... And much easier than creating a plugin if you're not already familiar with plugin development.