Foundation 5 forms are extremely fast and easy to use. But how does one get that error message to display using the Foundation 5 CSS? Thought I would post my findings in hopes that someone else finds it useful.
First, build your basic form.
Then insert the error placeholder either inside the label, the field, or the column or row containing the field.
<div class="row">
<div class="large-6 columns">
<label>First Name
<input type="text" name="firstName" id="firstName" placeholder="First Name" [[!+fi.firstName]]/>[[!+fi.error.firstName]]
</label>
</div>
<div class="large-6 columns">
<label>Last Name
<input type="text" name="lastName" id="lastName" placeholder="Last Name" [[!+fi.lastName]]/>[[!+fi.error.lastName]]
</label>
</div>
</div>
If these required fields are not filled out, MODx/FormIt will generate source code that looks like this:
<span class="error">This field is required</span>
and the message will display based on rules defined by the Foundation .error class
So what if you want to have something a bit more interesting than the boring old "This field is required"?
Easy peasy! Just use the following and enter your custom error message. Important to remember with this method of injection a custom error message. One must surround will span tags so that the class="error" will be applied. Otherwise you end up with just plain ole black text.
[[!+fi.error.firstName:notempty=`<span class="error">What did you say your first name was?</span>`]]
