Why does this Formit not validate?

Development
1

This is my complete Formit contact form, with non-real email address.
However, the validators don’t trigger the error messages.
e.g. if I click submit, nothing happens and no error messages appear next to the form fields, WHY??
I don’t know how to properly put in HTML/MODx code on this forum!! :frowning_face: :frowning:
Thank you, Tom
This is my complete Formit contact form, with non-real email address.
However, the validators don’t trigger the error messages.
e.g. if I click submit, nothing happens and no error messages appear next to the form fields, WHY??
Thank you, Tom

[[!FormIt? 
&hooks=`recaptchav2,spam,email,redirect`
&validate=`workemail:blank,name:required,email:email:required,text:required:stripTags`
&emailTpl=`email`
&emailSubject=`Website Inquiry` 
&emailTo=`webmaster@domain.org`
&emailCC=`[[+email]]`
&emailFromName=`[[+name]]`
&redirectTo=`27`
]]
<form action="[[~[[*id]]]]" method="post" class="form">  
<input type="hidden" name="workemail" value="" />
<p class="form"><label for="name">Name:<span class="error">[[+fi.error.name]]</span></label>
<input type="text" name="name:required" id="name" value="[[+fi.name]]" />
<p class="form"><label for="email">Email:<span class="error">[[+fi.error.email]]</span></label>  
<input type="text" name="email:email:required" id="email" value="[[+fi.email]]" />
<p class="form"><label for="text">Comments:<span class="error">[[+fi.error.text]]</span></label>
<textarea name="text:required:stripTags" id="text" cols="35" rows="7" value="[[+fi.text]]">[[+fi.text]]</textarea><br />
<p class="form">
    [[!recaptchav2_render]]
    [[!+fi.error.recaptchav2_error]]
</form>
</p> 
   <input type="submit" value="Send Contact Inquiry" />  
</form>
2

Do you get an error if you add the following:

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

Check out this email debugging snippet: https://modx.com/extras/package/quickemail and see https://bobsguides.com/quickemail-snippet-tutorial.html on how to use it.

3

Your error messages should be uncached.

Name:[[!+fi.error.name]]

instead of

Name:[[+fi.error.name]]

Add a ! after the two opening square brackets.

4

It’s the validation I am concerned with.
Not to mention that I can not properly paste code into this forum, something I have never ever seen before.
I set all the error messages to be uncached with the bang before the plus.
Nothing happens if the submit button is clicked with all fields blank and recaptcha not done.
Why is it not possible to post HTML form code etc.??

Test page is
https://www.mountainlakeservices.org/contact-test/

I created this form by duplicating another contact form, then revising this form to include the recaptcha.
Nothing happens upon clicking submit!! either sigh

5

Turn on Dev. Tools in Chrome or Firefox (Ctrl-shift-i) and check for JavaScript errors on page load and when you click on the Submit button.

6

To post code, put lines with three back-ticks a the start and at the end of your code.

```//line with 3 back-ticks a the beginning
//your code here
```//line with 3 back-ticks a the end

I looked at your form code and it is malformed. The tag <form> is closed twice.

<form action="contact-test/" method="post" class="form">  
  ...
</form>
 ...
  <input type="submit" value="Send Contact Inquiry" />  
</form>
1 Like
7

As @halftrainedharry said, you can post code using three back ticks ``` some code ```.

As for your form

<form action="contact-test/" method="post" class="form">  
<input type="hidden" name="workemail" value="" />
   
<p class="form"><label for="name">Name:<span class="error"></span></label>
<br />
<input type="text" name="name:required" id="name" value="" />
<br />
<div class="example">Example: Christine Doe (letters, dashes, apostrophes only). This field is required (both first and last name).</div></p>

<p class="form"><label for="email">Email:<span class="error"></span></label>  
<br />
<input type="text" name="email:email:required" id="email" value="" />
<br />
<div class="example">Example: userid@domain.com (a valid email address format). This field is required.</div></p> 

<p class="form"><label for="text">Comments:<span class="error"></span></label>
<br />
<textarea name="text:required:stripTags" id="text" cols="35" rows="7" value=""></textarea><br />
<div class="example">Please type your response using only letters, numbers, and punctuation. This field is required.</div></p>

<p class="form">
    <div class="g-recaptcha" data-sitekey="6Le4nLwSAAAAAEG8zUVhrGWqdxyF1ourqd-aT-7J"></div>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script>
    
</form>
<br />
<div class="example">This ensures that you are a person, not an automated program, submitting this form. This field is required.</div>
</p> 
<br />
<input type="submit" value="Send Contact Inquiry" />  
</form>

Again as @halftrainedharry pointed out you have closed your form after the recaptcha script element and after the final submit button.You need to remove the first </from>.

I just submitted a test form that worked fine by removing the first </from>.

8

Thank you everyone, I got it fixed by removing the extra </form> that I inadvertently put there via cut and paste.
There’s nothing anywhere that I saw that makes it obvious that one must use three backticks to insert code…most other forums put something of this nature in the toolbar.
Anyway all the error messages were showing twice until I removed
&validate=`workemail:blank,name:required,email:email:required,text:required:stripTags
Then the error messages only appear once where they are supposed to be.
Thank you, Tom

9

@tommls Glad you got it working. I highly suggest that you remove the validation from your input names and put &validate=`workemail:blank,name:required,email:email:required,text:required:stripTags` back in to the snippet call. It would be easy for a malicious user to remove your validation from the input name and submit the form.

So instead of

<input type="text" name="email:email:required" id="email" value="[[!+.fi.email]]" />

use

<input type="text" name="emai" id="email" value="[[!+.fi.email]]" />