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

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

Jump to solution

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
Highlighted
Not applicable

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

Jump to solution

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.

Reply
Not applicable

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

Jump to solution

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;

}

Reply
Stonehage
Nintex Newbie

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

Jump to solution

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.

Reply
Not applicable

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

Jump to solution

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.

Reply
miketrourad
Nintex Newbie

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

Jump to solution

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

Reply
bburke
Nintex Newbie

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

Jump to solution

Nice solution, thanks.

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

Bill Burke

Reply
Not applicable

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

Jump to solution

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
Reply
makesense
Nintex Newbie

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

Jump to solution

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

0 Kudos
Reply
courtney_shelto
Nintex Newbie

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

Jump to solution

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
Reply