AnsweredAssumed Answered

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

Question asked by arno on Jan 8, 2015
Latest reply on Jun 5, 2018 by bf_parvaz

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 !

Outcomes