From 7a05571af30b7b3e84bf290f8e4a1115de8d79c1 Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Mon, 6 May 2019 13:43:42 +0200
Subject: [PATCH] Added custom error message for price validation

---
 _includes/contact.html | 8 ++++----
 _sass/_base.scss       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_includes/contact.html b/_includes/contact.html
index 26355c8..229202d 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -10,18 +10,18 @@
         <div class="pt-3 pb-2 align-left">
             <form action="https://formspree.io/logobridge@ura.design" method="POST">
                 <label for="name">What’s the <strong>Name</strong> of your project you need a logo for?</label>
-                <input class='required' name='name' placeholder='Project Name' type='text' required>
+                <input id="name" name='name' placeholder='Project Name' type='text' required>
                 <div class="pt-2">
                     <label for="E-mail">What is your <strong>Email Address</strong>?</label>
-                    <input class='required email' name='E-mail' placeholder='E-Mail' type='text' required>
+                    <input id="E-mail" name='E-mail' placeholder='E-Mail' type='email' required>
                 </div>
                 <div class="pt-2">
                     <label for="message">Tell us more about your project. What type of logo are you looking for? What is the audience and what do you aim to accomplish with your project? Help us help you.</label>
-                    <textarea name='message' placeholder='' required></textarea>
+                    <textarea id="message" name='message' placeholder='' required></textarea>
                 </div>
                 <div class="pt-2">
                     <label for="budget">Name a <strong>Price</strong>  (USD $)</label>
-                    <input class='required' name='budget' placeholder='' type='number' min="100" max="9999999" required>
+                    <input id="budget" name='budget' placeholder='' type='number' min="100" max="9999999" required oninvalid="setCustomValidity('Minimum price is $100 USD')" oninput="setCustomValidity('')">
                 </div>
                 <div class="center pt-3">
                     <input class="button-submit" type="submit" value="Submit logo request">
diff --git a/_sass/_base.scss b/_sass/_base.scss
index ad1472f..354c142 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -216,7 +216,7 @@ form textarea {
   font-family: "Overpass";
 }
 
-input[type=text], input[type=textarea], input[type=number] {
+input[type=text], input[type=textarea], input[type=number], input[type=email] {
   width: 100%;
   padding: 14px 24px;
   box-sizing: border-box;