How to display only single validation error at a time

Question

I have this code to which displaying errors on my form

&         


        

Answer 1

If you have consistent markup for your error message blocks, then you can use css to display only the first message and hide the rest:

css

.message-block .error-message {
  // Hidden by default
  display: none;
}
.message-block .error-message:first-child {
  display: block;
}

markup

  
    Email is required (first-child of message block is displayed)
  
  
    Invalid email format (error message hidden by default)