cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

tip: how to move validation error messages from top of page

Hi all,

We made quite a long form for one of our clients and he was complaining about the fact that validation error messages are always posted on top of the page while the part of the form visible on screen remains the most bottom part.  This can be confusing to users as they don't always realize they need to modify their info.

Found a nice workaround using CSS.  The class containing the messages is called ".nf-validation-summary".  Basically I gave it a fixed position on the left side of the form (I centered the 730px form using css as well, thus always leaving margins on both sides...)

This way it is immediately visible after submitting the form if there is an error and remains visible, floating on the side of the form, while the user corrects his errors.  I also used some CSS keyframe animation to make it fade-in and even more visible.  Some extra styling gives it a red border with rounded corners, a  white backrgound (The margins on my page are dark grey) and a pretty "heavy" shadow...

To make it look even nicer I used an "after" pseudo class and a CSS trick for making a triangle pointing towards the form...

If someone is interested here is the basic CSS code which should probably be adapted to your own form:

@keyframes fadeIn  {

    from {opacity: 0;}

    to {opacity: 1;}

}

.nf-validation-summary{

     position: fixed;

     top: 150px;

     width: 280px;

     left: 15px;

     background-color: white;

     border: 2px solid red;

     border-radius:10px;

     box-shadow:  3px 3px 15px 15px rgba(50, 50, 50, 0.6);

     animation: fadeIn 1s;

}

.nf-validation-summary:after{

     position: absolute;

     content: '';

     border-style: solid;

     top: 40px;

     right: -15px;

     border-width: 15px 0 15px 15px;

     border-color: transparent transparent transparent white;

}

Hope this may help someone else...

Also, wondering if anyone knows wheter or not there are events being thrown by the error validation messages that could be used with a JS listener to better handle these? Thx !

Labels: (3)
Reply
13 Replies
Not applicable

Re: tip: how to move validation error messages from top of page

Thanks for the tip Arnaud.  I added your code to the Custom CSS, but didn't see anything when I tested it.  I thought it might be because I had no margin on the left so I changed the location from left to right and now I can see it.  Works great!

I am new to Nintex forms and CSS, so can you tell me how you centered your form on the page?

Thanks in advance.

Accept as Solution Reply
Not applicable

Re: tip: how to move validation error messages from top of page

Hi Chris,

Glad I could help!

A lot of work makes for very little time to come read over here but If you have not found already, the CSS to center the form is :

#onetIDListForm{

     margin: 0 auto;

}

Accept as Solution Reply
Workflow Hero

Re: tip: how to move validation error messages from top of page

Hi thanks so much for this. I had to add z-index:9; to .nf-validation-summary otherwise the pop up appeared behind certain objects.

Accept as Solution Reply
Not applicable

Re: tip: how to move validation error messages from top of page

Nice solution. One thing would it be possible to make a change to close the overlap screen let's say for example after 20 seconds? When you have a lot of errors the screen is over the form so people cannot see what to fill in anymore.

Accept as Solution Reply
Workflow Hero

Re: tip: how to move validation error messages from top of page

Have you tried this validation on an iPad or iPhone? It looks like it blanks out part of the page after the validation box displays.

This is a great solution.

Mike Trouard

Accept as Solution Reply
Workflow Hero

Re: tip: how to move validation error messages from top of page

Nice solution, thanks.

It appears behind the form. Is it possible to move it on top of the form?

Bill Burke

Accept as Solution Reply
Not applicable

Re: tip: how to move validation error messages from top of page

Hi, I have your solution working but on form load an empty container along with your white arrow image is shown. Is there any way to hide your container if empty, i.e. only show if validation errors are flagged?

Thanks.

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: tip: how to move validation error messages from top of page

But the solution seems only work in chrome, can't work in IE 9-11 & firefox.

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: tip: how to move validation error messages from top of page

I've implemented this, but I'm having the same (or similar) issue as ‌ where it shows always. As soon as I open the form, the empty red outlined box is in the left margin. How do I have this only appear when the validation occurs?

0 Kudos
Accept as Solution Reply