Formit Validators and Error Messages

markg · April 10, 2019, 11:53pm

Question about how to best set up validation and error messages in formit.

In my current call and form if i don’t enter a correct email message on the page I just get a little drop over message telling me to enter a correct email address. All good.

&validate=`email:email:required`

If I then try and do the same thing for my firstname and last name fields the page reloads and i get an ugly unformatted error message at the top of the page.

&validate=`email:email:required,
firstname:firstname:required:minLength=^2^`

How do i make those messages perform the same way as the email pop under error message?

Thanks

PS There are backticks around those calls they just don’t get shown by this threads formatting.

elizabeth · April 11, 2019, 12:06am

I fixed your formatting, you need to do the following in the future:
3 backticks, then a new line and your code, then a new line and 3 more backticks.

```
this is your code, including `back ticks` etc.
```

markg · April 11, 2019, 12:28am

This is what the form looks like

[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]           
                      
                      
                    <form method="post" action="[[~[[*id]]]]">
                      <div class="row">
                        <div class="col-md-3">
                             <div class="input-group">
                         <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" />
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                        <input type="text" class="form-control" placeholder="Last Name..." autocomplete="name"  name="lastname" id="lastname" value="[[!+fi.lastname]]"/>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                             <input type="email" class="form-control" placeholder="Email..." name="email" id="email" value="[[!+fi.email]]"/>
                          </div>
                        </div>
                        <input type="hidden" name="csrf_token" value="[[!csrfhelper? &key=`simple-form`]]">
                            [[!+fi.error.csrf_token:notempty=`<div class="error">[[!+fi.error.csrf_token]]</div>`]]
                        <div class="col-md-3">
                                  <div class="form-group">
                          <button type="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>
                          <input type="hidden" name="form2-submit" value="any value">
                        </div>
                        </div>
                      </div>
                    </form>

markg · April 11, 2019, 12:41am

I looked at here http://www.bitego.com/weblog/2014/05/26/protect-a-formit-web-form-from-spam-without-using-a-captcha.html and here https://cmstricks.com/blog/2013/03/21/modx-formit-tutorial/

But didn’t fully understand how to use the ```

&name.vTextRequired=` <span class="required error">Please enter your name.</span>`

or

[[!+fi.error.name:!empty=</` `code` `><` `li` `><` `a` `href` `=` `"[[~[[*id]]]]#name"` `>Name is a required field</` `a` `></` `li` `><` `code` `>]]

options.

elizabeth · April 11, 2019, 12:43am

Like I mentioned in my last post, you need to put ``` on a line by itself, and your code goes on the next line. I’ve updated your post, you can edit it to see how I did it.

markg · April 11, 2019, 12:44am

Unfortunately even the three ticks and seperate lines hack doesn’t always work.

elizabeth · April 11, 2019, 12:45am

I’m not sure what you’re doing wrong, but every time I’ve modified your posts it’s all I had to do. It’s not a bug in the forum software.

markg · April 11, 2019, 12:51am

I do what you said. I enter three back ticks, start a new line, post the code, start a new line and enter three back ticks.

Sometimes it works sometimes it doesn’t.

Maybe it’s because sometimes the code already has backticks in it that’s messing it up.

elizabeth · April 11, 2019, 12:57am

Looks like you got it. the triple backticks always need to be on their own lines, like the following picture:

treigh · April 11, 2019, 1:29am

Broadly speaking, the format should be as simple as:
fieldname:validator
or
fieldname:validator_1:validator_2:validator_n

In your case, the following should do:

&validate=`email:email:required,
firstname:required:minLength=^2^`

markg · April 11, 2019, 1:36am

That’s what i did, but as i said i get an ugly error message at the top of the page.

I’d rather it appeared as a popunder like the email error message does.

The only coding I have in the form at the moment for error messages is

[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]

Which I’m guessing uses some sort of default message.

I’d like to do the same for the firstname field.

treigh · April 11, 2019, 1:45am

The following will display the error message right next to your firstname field

<div class="input-group">
  <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" >
  <div class="text-danger">[[!+fi.error.fistname]]</div>
</div>

You can do the same for your other fields. And if you don’t want the global message placeholder generated on top, just remove it =>
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]

markg · April 11, 2019, 2:15am

Hmmm,

not happening

the page just reloads, now without the top message

Here’s the call bit

validate=`email:email:required,firstname:required:minLength=^2^`

Here’s the form code

           <div class="input-group">
                         <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" />
                          <div class="text-danger">[[!+fi.error.firstname]]</div>
                          </div>

Plus wouldn’t I have to create the actual error message somewhere?

treigh · April 11, 2019, 3:01am

No need. The error message is generated by the validator if the rule fails.

Can you paste your full FormIt call here? Usually a page reload indicates that something didn’t go as planned (like a validation failing, etc.).

markg · April 11, 2019, 3:07am

Ok

                   [[!FormIt?
	&hooks=`email,spam,csrfhelper_formit,FormItAutoResponder,redirect`
	&emailTpl=`subNotiTpl`
	&emailSubject=`[[++site_name]] You have a New Subscriber Body`	
	&emailTo=`stories@myaddress`
	&redirectTo=`25`           
	&validate=`email:email:required,firstname:required:minLength=^2^`
	&csrfKey=`simple-form`
	&fiarTpl=`sentEmailTpl`
	&fiarSubject=`Thanks for Subscribing`
	&fiarToField=`email`
	&fiarFromName=`Ampli`
	&submitVar=`form2-submit`
]]

And the form

            <form method="post" action="[[~[[*id]]]]">
                      <div class="row">
                        <div class="col-md-3">
                             <div class="input-group">
                         <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" />
                          </div>
                        </div>
                        
                        <div class="col-md-3">
                          <div class="form-group">
                        <input type="text" class="form-control" placeholder="Last Name..." autocomplete="name"  name="lastname" id="lastname" value="[[!+fi.lastname]]"/>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                             <input type="email" class="form-control" placeholder="Email..." name="email" id="email" value="[[!+fi.email]]"/>
<div class="text-danger">[[!+fi.error.firstname]]</div>
                          </div>
                        </div>
                        <input type="hidden" name="csrf_token" value="[[!csrfhelper? &key=`simple-form`]]">
                            [[!+fi.error.csrf_token:notempty=`<div class="error">[[!+fi.error.csrf_token]]</div>`]]
                        <div class="col-md-3">
                                  <div class="form-group">
                          <button type="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>
                          <input type="hidden" name="form2-submit" value="any value">
                        </div>
                        </div>
                      </div>
                    </form>

treigh · April 11, 2019, 3:56am

At first glance, your setup looks good. One note of caution: hooks are executed in the order they appear in the property. If one fails, the following ones won’t be fired. This is usually the prime cause of page reloads when the form is submitted.

You should reorder your hooks as follows:

&hooks=`spam,csrfhelper_formit,email,FormItAutoResponder,redirect`

Also, you’re using a spam hook, but you’re not validating fields against it. So either remove the spam hook or add the missing validation rule and the corresponding field.

// in your form
<input type="hidden" name="nospam" value="">

// in your FormIt call
&validate=`nospam:blank,...`

Don’t forget to set the fiarReplyTo property in your Formit call. This is required by FormItAutoResponder.

Finally, the best way to debug FormIt is by starting with one hook and gradually adding new ones as things begin to work as expected. This will allow you to see which hooks are causing problems. I would advise starting with the email hook, then redirect, then spam and then all else. Keep note of the order mentioned above.

One last thing… Check your logs in the manager for possible errors. I’d have my eyes on FormItAutoResponder while debugging.

markg · April 11, 2019, 4:02am

Thanks Triegh,

yeah I did start one hook at a time, testing as i went.

But the spam protection stuff was the last to be added and i’m still not entirely sure how to set that all up, but that’s another thread.

Anyway, I’ll reorder them like you suggest and see what happens.

markg · April 11, 2019, 4:43am

OK, no joy there.

Next I took out all the spam protection but still getting the same result.

Call now looks like this

                      
                   [[!FormIt?
	&hooks=`email,FormItAutoResponder,redirect`
	&emailTpl=`subNotiTpl`
	&emailSubject=`[[++site_name]] You have a New Subscriber Body`	
	&emailTo=`stories@myaddress`
	&redirectTo=`25`           
	&validate=`email:email:required,firstname:required:minLength=^2^`
	&csrfKey=`simple-form`
	&fiarTpl=`sentEmailTpl`
	&fiarSubject=`Thanks for Subscribing`
	&fiarToField=`email`
	fiarReplyTo=`stories@myaddress`
	&fiarFromName=`Ampli`
	&submitVar=`form2-submit`
]]

form looks like this

<form method="post" action="[[~[[*id]]]]">
                      <div class="row">
                        <div class="col-md-3">
                             <div class="input-group">
                         <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" id="firstname" value="[[!+fi.firstname]]" />
                          <div class="text-danger">[[!+fi.error.firstname]]</div>
                          </div>
                        </div>
                        
                        <div class="col-md-3">
                          <div class="form-group">
                        <input type="text" class="form-control" placeholder="Last Name..." autocomplete="name"  name="lastname" id="lastname" value="[[!+fi.lastname]]"/>
                          </div>
                        </div>
                        <div class="col-md-3">
                          <div class="form-group">
                             <input type="email" class="form-control" placeholder="Email..." name="email" id="email" value="[[!+fi.email]]"/>
                             
                          </div>
                        </div>
                    
                        <div class="col-md-3">
                                  <div class="form-group">
                          <button type="submit" class="btn btn-primary btn-round btn-block">Get Secrets</button>
                          <input type="hidden" name="form2-submit" value="any value">
                        </div>
                        </div>
                      </div>
                    </form>

lkfranklin · April 11, 2019, 5:49am

fiarReplyTo=`stories@myaddress`

should be

&fiarReplyTo=`stories@myaddress`

treigh · April 11, 2019, 5:59am

Can you also check your manager log for errors?