← Back to Examples

Error & Valid States

Style form elements based on error and valid states with classes and visibility toggles.

Live Demo

Please include your middle name

Source Code

On this form

  • • Add validation to form element using sf-validate:[type]
  • • If there are no errors, unhide element using valid-show:[field_name]
  • • Return errors to an element using error-show-text:[field_name]
  • • Conditional classes for error error-class:[field_name]="error-class"
  • • Unhide element if there are any errors if-error-show
  • • Apply style if there are any errors if-error-style
  • • Inject text if there are any errors if-error-text

Documentation Reference