Formit Validators and Error Messages

[markg]

Nothing in the Error logs.

So I know the form works without the firstname required

so there must be something wrong with the way I’ve coded

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

or

          <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>

PS Even if I remove the minimum length, it still doesn’t work.

[lkfranklin]

I stripped the form down to give it a quick test and can confirm this works for me. Give it a test and if it works for you then start adding things back in one at a time until it breaks. If it doesn’t work for you then there’s another issue at play. Try putting this just in a ‘blank’ template.

[[!FormIt?
&hooks=`redirect`
&redirectTo=`25`           
&submitVar=`form2-submit`
&validate=`email:email:required,firstname:required:minLength=^2^`
]]
<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>

[markg]

Ok,

it works on it’s own.

But when I put it back into the main template that’s when the issue occurs.

So there must be some conflict with something else on the main page.

I’ll have to do some digging.

[lucy]

What happens if you take the other form out of the main template and leave just this one? Also - does the other form in the page work properly?

[markg]

Lucy,

yes, one of the first things I thought of.

Removing it makes no difference and yes it does work properly.

And just to be clear, when I use ikfranklin’s stripped down code and put it in a new template, both forms work ok.

So there’s something in the main template that’s causing a conflict. And that means I have to examine the entire page’s code. Fun.

[lucy]

Does the stripped down code work in your main template along with your other form? From what I can see the stripped down form is same as yours minus all the hooks except for redirect. So I wonder if it’s one of the hooks that isn’t compatible with having two forms in the same template…

[lucy]

In other words, before trying to find out if there’s something up with your particular template code, first prove that both of your forms with all the hooks, etc. can actually work on a base template together?

[markg]

As i said that’s what I’ve done, they work together.

I know it gets confusing, it confuses me.

So let me try and clear up where I’m at.

Orignally both forms worked together in the main template. (How i got there was subject of another thread.)

When I added the
firstname:required:minLength=^2^

that’s when the problem occurred.

Now the form still works fine on my main template if i use a two or more character firstname, but if i use less the page reloads.

When I created a new resource and template, and used the stripped down version everything works fine.

If I put that stripped down version back in the main template the problem occurs.

So, process of elimination, there’s something in the main template causing an issue.

My templates are pretty modular so i can go thru and switch out bits and pieces to narrow down where the problem is. Just not going to have much time to do it today.

Stay tooned.

[markg]

OK,

first thing I’ve noticed is that this div causes the end field design curve not to show.

<div class="text-danger">[[!+fi.error.firstname]]</div>

Not sure if it’s causing the problem, but it’s definitely a design issue.

Hopefully you can see the missing end curve in these screenshots.

[lkfranklin]

I think the page reloading when submitting the form is expected behaviour. if modx is handling the validation then the form has to submit and the page reloads with error messages populated if there are any. do your error messages display correctly? given the design issue you mentioned you may need to tweak the text danger class.

if you want to try and stop the former submitted though unless they type a minimum of 2 characters then set a minlength attribute on the first name input field.

[markg]

Thanks LK,

the issue wasn’t quite that the page reoaded, but that it reloaded with ugky error message at the top of the page.

I know, it’s becomign a long thread, and easy to lose track of the original issue.

Anyway, what I do know is that my original code with all the call bits plus your error message bit works fine in a new template.

Not sure if I said that already.

Now I’m working thru swapping in and out my template chunks to see if i can isolate the main issue.

[lkfranklin]

OK I get you. So the reason why you get a nice pop under message for email is because you are using html5 validation for email. because it says input type is email the browser knows that this has to be an email address of sorts. if you use that minlength attribute for names and messages you’ll get the same behaviour.

if you want to also apply back end validation and have it display nicely you’ll need to write some css to style the error message how you want it.

[markg]

Ah, the web gods are messing with me.

After stripping everything out of my main template and adding them back chunk by chunk, the form is now working. Arrrrgh

However, I do have another slight problem, that when the page reloads it doesn’t reload to the part of the page where the form is but to the top of the page.

So that’s a confusing usability issue.

Is there a way to make the page reolad to the correct part of the page?

[lkfranklin]

Thats a new issue

Does setting minlength=“2” on your first name input solve this issue for you ?

[markg]

Is this what you mean?

 <input type="text" class="form-control" placeholder="First Name..." autocomplete="fullname" name="firstname" minlength=“2”  id="firstname" value="[[!+fi.firstname]]" />

Added minlength=“2” in the middle of it

[lkfranklin]

Yes. Does this give you the error tooltip you were referring to?

[markg]

Excellent, that’s what I was after right from the start.

[lkfranklin]

Woop please mark as solved

[markg]

For the record the final code looks like this:

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


       
                      
                      
                    <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" minlength="2" 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]]"/>
                                     <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>
                        </div>
                    <input type="hidden" name="nospam" value="">
                        <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>