Freeform Pro Show message when email is invalid

Question

I'm using Freeform Pro composer to build a form. Validating with inline error messages.

Template code

{exp:freeform:composer
  form_name="contact_us"
  form_id="2" 
  composer_template_name="contact_us"
  return="contact_us/thank_you"
  inline_errors="yes"
  form:class="contact-us"
}

I have an email field that is required. The email Field Type is text and the Field Content Type is set to email.

If I submit the form without any data in the email field I get a message "Please fill in this field".

If I fill in the field with text that's not a valid email address, I would like it to display a message telling them a valid email address is required.

Is this something that can be done without any additional coding?

Thanks

Wayne.

Answer 1

2 options, one is adding server side validation which will involve extending all sorts of internal's, the other which I feel you'd like is to use a HTML5 email type field (freeform uses a text field for the email import).

You can do this easily, please see this example that I am currently using on a site :

    {freeform:field:email 
        attr:type="email" 
        attr:id="email"
        attr:required="required"
        attr:size="36"
        attr:placeholder="Enter your email here..."}
    {if freeform:error:email}<p>{freeform:error:email}</p>{/if}

This produces the email field as so :

<input type="email" placeholder="Enter your email here..." size="36" required="required" maxlength="150" id="email" value="" name="email">

Note this is client side validation, HTML5 validation only! But the server side option can be alot more complex! the irony is that CodeIgnitor has a valid_email filter, it's just that Freeform doesn't seem to use it!