feat: add classes to validate form.

animation to show the errors (optional)

assets/scss/core/_base.scss

@@ -29,9 +29,9 @@ label {
   border-color: $dp-color-lightgrey transparent transparent transparent;
   position: absolute;
   right: 15px;
-  top: 67%;
+  top: 2.5em;
   z-index: 10;
-  transform: translateY(-50%);
+  pointer-events: none;
 }
 
 select {
@@ -76,35 +76,77 @@ textarea {
     border: 1px solid $dp-color-yellow;
   }
 }
-/* validate */
-.required {
+/* validate form*/
+.field-group {
   position: relative;
   display: inline-block;
   text-align: left;
   width: 100%;
   margin-bottom: 30px;
 }
 
-.error {
-  &:after {
-    left: 0;
-    top: 100%;
-    color: $dp-color-red;
-    content: attr(data-error);
-    font-size: $dp-font-size-small;
-    line-height: 20px;
-    padding: 0;
-    position: absolute;
-    text-transform: initial;
-    white-space: nowrap;
-    z-index: 1;
-  }
+.error-messages {
+  display: none;
+}
 
+.error {
   input,
   select,
   textarea {
     border: 1px solid $dp-color-red;
-    @include transition-all;
+  }
+
+  .error-messages {
+    display: inline-block;
+
+    p {
+      margin: 0;
+      color: $dp-color-red;
+      font-size: $dp-font-size-small;
+    }
+  }
+  /* animation to show the errors (optional) */
+  @keyframes bounceIn {
+    20%,
+    40%,
+    60%,
+    80%,
+    from,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+
+    0% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+
+    20% {
+      transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    40% {
+      transform: scale3d(0.9, 0.9, 0.9);
+    }
+
+    60% {
+      opacity: 1;
+      transform: scale3d(1.03, 1.03, 1.03);
+    }
+
+    80% {
+      transform: scale3d(0.97, 0.97, 0.97);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  .bounceIn {
+    animation-duration: 0.75s;
+    animation-name: bounceIn;
   }
 }