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.

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. 

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

Thank you very much ‌ ..

Your soution worked well!