2

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>
  • Thanks Jeremy... you are right, I should expand my ability for this. I’ll look into some tutorials. – ToddPadwick Nov 11 '17 at 12:55
2

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;
    }          
}
  • Thank you for this. makes sense. a little past my expertise though, so I guess i'm going to have to find someone who can create this plugin for me. – ToddPadwick Nov 10 '17 at 11:50
  • 1
    Well, Craft Slack has a jobs section if you want to shop the work out, but you're probably going to want to get familiar with plugins if you're doing anything beyond the most basic Commerce project....it's really where all the power lies. You can generate a lot of the plugin infrastructure using pluginfactory.io - and then just basically fill in the bits as supplied above but you will need some php skills to get it going really. Good luck! – Jeremy Daalder Nov 11 '17 at 0:43
1

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.

  • And then someone like me appears with a little bit Js knowledge or a person with disabled js and destroys your validation. I know it's not that critical in this case but solutions like yours saved me money and time in the past. I would not recommend it. It's great for the user though – Robin Schambach Jul 19 '18 at 21:54
  • 2
    One should always validate server side. But validating client side is important for UX. It's good practice to do both. Front end is for the user's benefit, back end is for the site's benefit. – foamcow Jul 20 '18 at 11:31
  • JavaScript is used by 94.9% of all the websites. Someone with JS disabled in 2018 is atypical. I agree with @foamcow though that it's best practice to do both... However best practices aren't always practical or realistic. i.e. If you're capturing a tax id, server side is absolutely critical. But if it's a middle initial on a simple email form, and you have a deadline, spending a week learning to create a plugin probably isn't your best use of time. – Jack Sutherland Jul 23 '18 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.