Quick Tip: Validation “Lights” Using Zurb Foundation and AngularJS

The more I play with Zurb Foundation and AngularJS, the more I love it. As a middle tier / backend developer, having these tools at my disposal gives me a nice looking app with powerful client side data binding / object manipulation with little work.

Here’s a little trick I came up with this weekend while working on a pet project to do form validation without taking up much space on the screen.

I won’t go into much explanation here, I’ll let the CodePen do most of the talking. The trick here is to leverage the postfix form layout with Zurb (I’m actually using both prefix and postfix) in conjunction with angular’s validation and no-show / ng-hide directives to show or hide our error/valid span within the postfix.

This example doesn’t actually show the error messages, since I’m trying to optimize for a mobile layout, but you could easily display error messages below the inputs or potentially collate them all above/below the form entry.

Note that the create/cancel buttons don’t actually work, they are just there for show. You can see, however, that the create button will not be enabled until everything is valid.

I hope this helps! Enjoy!

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s