fix validation + style

imichall · Mar 1, 2021 · 5b46034 · 5b46034
1 parent b9b4c1b
commit 5b46034
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 38 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,9 +1,10 @@
 import jQuery from "jquery";
 import slick from "slick-carousel";
+import Validate from "jquery-validation";
 
 window.$ = window.jQuery = jQuery;
 
-$('.testimonials').slick({
+$(".testimonials").slick({
     slidesToShow: 3,
     slidesToScroll: 1,
     autoplay: true,
@@ -12,37 +13,52 @@ $('.testimonials').slick({
     swipe: true,
     responsive: [
         {
-          breakpoint: 1024,
-          settings: {
-            slidesToShow: 3,
-            slidesToScroll: 3,
-            infinite: true,
-          }
+            breakpoint: 1024,
+            settings: {
+                slidesToShow: 3,
+                slidesToScroll: 3,
+                infinite: true,
+            },
         },
         {
-          breakpoint: 600,
-          settings: {
-            slidesToShow: 2,
-            slidesToScroll: 2
-          }
+            breakpoint: 600,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 2,
+            },
         },
         {
-          breakpoint: 325,
-          settings: {
-            slidesToShow: 1,
-            slidesToScroll: 1,
-            arrows: false,
-            dots: true,
-          }
-        }
-      ]
-  });
+            breakpoint: 325,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                arrows: false,
+                dots: true,
+            },
+        },
+    ],
+});
+
+$(function () {
+    $("#Navbar-Menu button").on("click", function () {
+        $(".Navigation_Link").toggleClass("isOpen");
+    });
 
-  $(function() {
-    $("#Navbar-Menu button").on('click', function() {
-        $('.Navigation_Link').toggleClass('isOpen');
+    $(function () {
+        $("form[name='newsletter']").validate({
+            rules: {
+                email: "required",
+                email: {
+                    required: true,
+                    email: true,
+                },
+            },
+            messages: {
+                email: "Please enter a valid email address",
+            },
+            submitHandler: function (form) {
+                form.submit();
+            },
+        });
     });
-    /* $('#Navbar-Menu button').on('click', function(){
-        $(this).toggleClass('isOpen');
-    }); */
-});
+});
diff --git a/assets/less/components/Form.less b/assets/less/components/Form.less
@@ -1,4 +1,5 @@
 .Form {
+    position: relative;
     display: flex;
 
     input[type="email"] {
@@ -12,6 +13,15 @@
         &:focus {
             outline: none;
         }
+
+    }
+
+    label.error {
+        @typography-style-input-error();
+
+        position: absolute;
+        left: 5px;
+        bottom: -20px;
     }
 
     input[type="button"] {
@@ -34,6 +44,13 @@
 
       &:invalid:not(:focus):not(:placeholder-shown) {
         background: pink;
+        & + label {
+          opacity: 1;
+        }
+      }
+
+      &:focus:placeholder-shown {
+        background: @ui-colors-primary[white];
         & + label {
           opacity: 0;
         }

diff --git a/assets/less/settings/typography-styles-base.less b/assets/less/settings/typography-styles-base.less
@@ -112,4 +112,11 @@
     font-weight: @typography-font-weight-values[bold];
     font-size: @typography-scale[m2];
     color: @ui-colors-primary[white];
+}
+
+@typography-style-input-error: {
+    font-family: @typography-font-family-base;
+    font-weight: @typography-font-weight-values[regular];
+    font-size: @typography-scale[m2];
+    color: @ui-colors-primary[brighRed];
 }
diff --git a/assets/less/settings/typography-styles-shared.less b/assets/less/settings/typography-styles-shared.less
@@ -51,8 +51,4 @@
 
 .typography-perex {
     @typography-style-perex();
-}
-
-.typography-copy {
-
 }
diff --git a/build/css/main.min.css b/build/css/main.min.css
diff --git a/build/js/scripts.min.js b/build/js/scripts.min.js
diff --git a/index.html b/index.html
@@ -212,7 +212,7 @@ <h4 class="typography-h2-white u-sm-mr--7">Simplify how your team works today.</
           </ul>
         </div>
         <div class="FooterLayout_Form">
-          <form class="Form">
+          <form class="Form" name="newsletter">
             <input type="email" name="email"  placeholder="Updates in your inbox…" required>
             <input type="button" value="Go">
           </form>

diff --git a/package.json b/package.json
@@ -38,16 +38,16 @@
         "gulp-concat": "^2.6.1",
         "gulp-cssmin": "^0.2.0",
         "gulp-jsvalidate": "^4.0.0",
+        "gulp-less": "^4.0.1",
         "gulp-notify": "^3.2.0",
         "gulp-plumber": "^1.2.1",
         "gulp-postcss": "^8.0.0",
         "gulp-rename": "^1.4.0",
         "gulp-rimraf": "^0.2.2",
-        "gulp-less": "^4.0.1",
         "gulp-tinypng": "^1.0.2",
         "gulp-uglify": "^3.0.2",
         "jquery": "^3.5.1",
-        "jquery-validation": "^1.19.2",
+        "jquery-validation": "^1.19.3",
         "node-sass": "^4.14.1",
         "rollup": "^2.18.0",
         "rollup-plugin-babel": "^4.4.0",