Solved

Modify the position of Validation Summary from top of Nintex Forms

  • 5 February 2017
  • 4 replies
  • 101 views
ArohShukla
Badge +9

Hi All,

 

I have a long form and users need to full all the required fields. If they miss any data Nintex shows validation errors on the page.

I found a blog that solves the issue by providing CSS

 @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;}}  
.nf-validation-summary  
{   
  position: fixed;   
  z-index : 1000;   
  top: 150px;   
  width: 280px;   
  left: 15px;   
  background-color: white;   
  border: 2px solid red;   
  border-radius:3px;   
  box-shadow: 3px 3px 3px 3px rgba(50, 50, 50, 0.6);   
  animation: fadeIn 1s;  
  margin-top : 20px;  

}  

when a form is loaded, it keeps that red border as default even if a user has NOT filled any entry.



Q: How could modify the above CSS code to show validation error ONLY when missed any form field(s)?
Any help would be highly appreciated.
 

icon

Best answer by rhia 6 February 2017, 08:18

View original

4 replies

W
Badge +9

What is the issue you're trying to solve? you stated form shows validation errors on screen once submit is selected.

Personally I have a small code snippet that is there is a validation error it focus the form on the validation section at the top of the form so users can see the issues, rather than just stating at the end of a long form where the submit button is.

ArohShukla
Badge +9

Thanks for your reply Warwick Ward  

Challenge:

I am able to get the CSS from the blog. However, the form always shows the Red Border box even when a user has not filled any form field as shown:


It’s quite weird for the users as they have NOT filled in any form fields.

Need a solution

I am looking out a solution when a user clicks in the Save button, ONLY after that validation summary should be displayed as follows:



I guess, some Save button action has to be added in this logic.

I hope you I am clear this time around. 
Any help to achieve this?  

Thanks in advance. 

rhia
Userlevel 6
Badge +15

Hi Sandy!

The easiest way would be to remove this from your CSS:

  border: 2px solid red;   
  border-radius:3px;   
  box-shadow: 3px 3px 3px 3px rgba(50, 50, 50, 0.6);   

But then the border won't appear when the validation is showing, as well - but this is the easiest solution!

Cheers,

Rhia

ArohShukla
Badge +9

Thank you very much ‌ ..

Your soution worked well!  

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings