tbonejenkins, two things regarding your specific question about handling validation errors:
The design you show looks fine: it uses established patterns for highlighting the field; displays the warning in the proper context; and it does not obscure or move around the hint text. I don't see a pressing reason to change this at all.
A required field should be marked as such in its default state. I.e., don't wait until the form validates its input to tell the user which fields are required, and which aren't. Instead, apply the common " (required)" label text or an asterisk "*".
On a more general note, what's the motivation for using "floating labels" to begin with? They're known to cause some of the same usability issues that plague using placeholders as labels. Also, animating the labels between their two positions does not any meaningful information and simply feels gratuitous (particularly to a "UX traditionalist" like myself ;) ).
If you do continue to use them, please consider increasing the text size for both the label in its "in-form-outline" position and the hint text a bit, so they're both easier to read, especially for users with less-than-ideal eye sight.