一般的にフォームの入力エラーがあると上の方にエラーメッセージが表示されます。多くの場合、エラーメッセージは表示が残るので、二回目のエラーとなった時に表示が更新されずに分かりづらいことがあります。 エラーが起きたんだ、ということを強くアピールしたい時にはformAnimationを使ってみましょう。アニメーションでインパクトある通知ができます。

formAnimationの使い方

formAnimationでは2パターンのアニメーションがサポートされています。一つ目はシェイクです。

もう一つはバウンドです。

どちらが良いかはサイトや通知したい内容によって変わるでしょう。シェイクジェスチャーはフォーム全体が入力を嫌がっているように見えるので、より効果的ではないかと思います。

formAnimationはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

nnluukhtn/formAnimation: Form Animation: when form validation <3 animate.css