How do you get FormIt to Validate?

1,078 Posts

mmcgee Reply #1, 12 years, 7 months ago

I am confident that FormIt is an awesome add-on. So far I've built a form using Foundation 5 classes and inserted various FormIt aspects and my form gets successfully emailed to me. So far so good. Problem is, if the required fields are not filled out, the form doesn't get emailed and there are no error messages. The page just reloads with an empty form. Not so good. Basically and incomplete form must be getting mailed off into the abyss. I'm hoping someone familiar with it can take a look. I'm hoping to be able to use the foundation 5 error classes, but at a bare minimum I need errors to appear in some fashion and not have the form get lost. Actually—maybe the form isn't getting lost, it's just reloading the page, but no info is provided to the user. I'm sure this will get easier, but I could really use some tips at the moment.

Here is my current FormIt snippet:
[[!FormIt?
&hooks=`spam,email,redirect`
&emailTpl=`ResLSNWChunk`
&emailTo=`[email protected]`
&emailSubject=`Reservation from [[+firstName]] [[+lastName]]`
&redirectTo=`35`
&validate=`firstName:required,
lastName:required,
officeCommon:required,
officeLegal:required,
email:email:required,
phone:required,
text:stripTags`
]][[!+fi.error_message:notempty=`[[!+fi.error_message]]`]]

Here a portion of my form for which I want these fields to be required:

  <div class="row">
    <div class="large-6 columns">
      <label>First Name*
        <input type="text" name="firstName" id="firstName" placeholder="First Name" [[!+fi.firstName]]/>
      </label>
    </div>
    <div class="large-6 columns">
      <label>Last Name*
        <input type="text" name="lastName" id="lastName" placeholder="Last Name" [[!+fi.lastName]]/>
      </label>
    </div>
  </div>

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years, 7 months ago

You need to have something like this for each field that is validated:

<span class="error">[[!+fi.error.firstName]]</span>

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

1,078 Posts

mmcgee Reply #3, 12 years, 7 months ago

I might be sort of figuring this out. I inserted

<span class="error">[[!+fi.error.firstName]]</span>

after the opening label tag to arrive at

<label>Name*<span class="error">[[!+fi.error.firstName]]</span>

The result is a thin red box, which I am not able to yet determine the source. I have a feeling that it's part of the Foundation 5 error class, so I need to review.

Good news is, I submitting an empty form and the screen reloaded with the red boxes opened further and a message inside. "This field is required" I'm guessing though, I can populate with my own message like "Need your name knot head" or "Did you forget you name? ", or maybe a simple "whoooooo issssss it?"

Ok, I've been up all night working at this and I'm a tad bit loopy.

1,078 Posts

mmcgee Reply #4, 12 years, 7 months ago

Quote from: sottwell at Feb 25, 2014, 09:40 AM

You need to have something like this for each field that is validated:
[[!+fi.error.firstName]]

Heeeeello Susan!
I was solving and typing at the same time you were. Your ears must have been burning cause I was hoping you might chime in. Thank you.

There error item certainly did the trick. Now I need to review placement and/or determine why part of the red error box is displaying. There is a lot to this FormIt. At this point, I could probably just hand code a php form, but I'm sure once I get the hand of it, FormIt is much faster, and way easier to manage.

1,078 Posts

mmcgee Reply #5, 12 years, 7 months ago

I think I may have figured something out.

If properly coded, the error class (if placed on the label for example) will turn that label text red. (commonly interpreted as a required item). This is good. User friendly. Calls attention to it.

The following structure works for adhering the FormIt Validation to a Label. Foundation 5 error classes can as well be applied to either the label, the input, or to a row or column containing the form element.

      <label class="error">First Name*[[!+fi.error.firstName]]
        <input type="text" name="firstName" id="firstName" placeholder="First Name" />
      </label>

Now... back to FormIt Docs. I'm sure that there is a way I can insert my own custom, and sometimes hilarious or not so much, error messages.

Ah.....progress!

☆ A M B ☆
894 Posts

benmarte Reply #6, 12 years, 7 months ago

Check out my FormIt tutorial it might help you better understand how it works.

Hope that helps.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

1,078 Posts

mmcgee Reply #7, 12 years, 7 months ago

Now why didn't I think of that! Don't have to ask me twice. Thanks Ben.

1,078 Posts

mmcgee Reply #8, 12 years, 7 months ago

Still stuck. I have assessed that following the Foundation 5 example of inserting the class="error" is not exactly correct. My interpretation is that their example is merely showing where the class might go. So I think I need to somehow get my class inside of connecting to each error element, [[!+fi.error.firstName "then put something here that calls up my class when there is an error"]]

Or perhaps I need to write a custom php validation script that will interject the .class so that the error message with display based on Foundation 5 CSS rules.

1,078 Posts

mmcgee Reply #9, 12 years, 7 months ago

Solution! If all else fails... look at the source code that gets generated.

class="error" should not be inserted anywhere on a form that needs to be validated.

In my case, FormIt in MODx will insert the class on an as needed basis.

[[!+fi.error.yourFieldName]]

becomes

This field is required

only if the required field is not filled out.

Phew!
[ed. note: mmcgee last edited this post 12 years, 7 months ago.]