cancel
Showing results for 
Search instead for 
Did you mean: 
sandy_s
Nintex Newbie

Modify the position of Validation Summary from top of Nintex Forms

Jump to solution

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.

Tags (1)
Reply
4 Replies
Warwick
Nintex Newbie

Re: Modify the position of Validation Summary from top of Nintex Forms

Jump to solution

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.

0 Kudos
Reply
sandy_s
Nintex Newbie

Re: Modify the position of Validation Summary from top of Nintex Forms

Jump to solution

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. 

0 Kudos
Reply
Automation Master
Automation Master

Re: Modify the position of Validation Summary from top of Nintex Forms

Jump to solution

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

0 Kudos
Reply
sandy_s
Nintex Newbie

Re: Modify the position of Validation Summary from top of Nintex Forms

Jump to solution

Thank you very much ‌ ..

Your soution worked well!  

Reply