Freeform - how can I make the recipients select field required?

Question

I have a freeform form with a select field allowing the user to select from 5 possible recipients. I do not want to have any of the recipients selected by default - the user must select one. I would like the recipient select field to be a required field. So, if the user does not select a recipient, an error message will be displayed.

I've seen that other people have done it the way I have, so I'm assuming I've used the right method, but for some reason it doesn't work. If I leave the select field empty, the form will still submit (but obviously not get sent anywhere because a recipient has not been selected).

My code is below. Any ideas?

{exp:freeform:form
  form_id="1"
  required="recipient_email|name|email|message"
  inline_errors="yes"
  form:id="enquiry-form"
  return="contact/success"
  recipients="yes"
  recipients_limit="5"
  recipient_template="enquiry_email"
  recipient1="Option 1|name@example.com"
  recipient2="Option 2|name@example.com"
  recipient3="Option 3|name@example.com"
  recipient4="Option 4|name@example.com"
  recipient5="Option 5|name@example.com"
}
  {if freeform:general_errors}
    <h2>There were some error(s) with your submission:</h2>
    <ul>
      {freeform:general_errors}
      <li>{freeform:error_message}</li>
      {/freeform:general_errors}
    </ul>
  {/if}

  <div class="row">
    <div class="col-xs-12 {if freeform:error:recipient_email}has-error{/if}">
      <label for="recipient_email">I have an enquiry about... <span class="required">*</span></label>
      <select class="form-control" name="recipient_email" id="recipient_email">
        <option value=""></option>
        {freeform:recipients}
          <option value="{freeform:recipient_value}">{freeform:recipient_name}</option>
        {/freeform:recipients}
      </select>
      {if freeform:error:recipient_email}
        <span class="help-block">Please specify the nature of your enquiry</span>
      {/if}
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 {if freeform:error:name}has-error{/if}">
      <label class="control-label" for="name">{freeform:label:name} <span class="required">*</span></label>
      {freeform:field:name attr:class="form-control" attr:id="name"}
      {if freeform:error:name}
        <span class="help-block">Please enter your name</span>
      {/if}
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 {if freeform:error:email}has-error{/if}">
      <label class="control-label" for="email">{freeform:label:email} <span class="required">*</span></label>
      {freeform:field:email attr:class="form-control" attr:id="email"}
      {if freeform:error:email}
        <span class="help-block">Please enter your email address</span>
      {/if}
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      <label class="control-label" for="email">{freeform:label:phone}</label>
      {freeform:field:phone attr:class="form-control" attr:id="phone"}
    </div>
  </div>

  <div class="row">
      <div class="col-xs-12 {if freeform:error:message}has-error{/if}">
        <label class="control-label" for="message">{freeform:label:message} <span class="required">*</span></label>
        {freeform:field:message attr:class="form-control" attr:rows="6" attr:id="message"}
        {if freeform:error:message}
          <span class="help-block">Please enter a message</span>
        {/if}
      </div>
  </div>

  <div class="row">
    <div class="col-xs-12">
      {freeform:submit attr:class="btn btn-green" attr:value="Send"}
    </div>
  </div>
{/exp:freeform:form}

Answer 1

Have you tried required="recipients|name|email|message" ?