diff --git a/css/styles.css b/css/styles.css
index 6c9c8c9..951370b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -271,6 +271,13 @@ input:valid+span:after {
     padding-left: 5px;
 }
 
+.errorMsg {
+  color: red;
+}
+
+.accountLabel {
+  text-align: left;
+}
 
 /* Footer section */
 
@@ -334,4 +341,4 @@ input[type=submit] {
 
 input[type=submit]:hover {
     background-color: #fa4664;
-}
\ No newline at end of file
+}
diff --git a/index.html b/index.html
index c3e5f86..cb8c5a9 100644
--- a/index.html
+++ b/index.html
@@ -209,7 +209,7 @@
           <div class="card-body">
             <h2 class="price-text">$47.95</h2>
             <img class="title-image" src="images/brake.jpg" alt="bike1">
-        
+
             <p> <br>Standard Kit | Part Replacement</p>
             <!-- <button type="button" onclick="toAppointment()" class="btn btn-block btn-outline-dark btn-lg">Select</button> -->
           </div>
@@ -296,7 +296,7 @@
       <h2 class="big-heading"> <i class="far fa-clock"></i> Book an Appointment </h2>
       <br>
       <!-- Accordion for booking a service-->
-      <form onsubmit="validateForm()" method="post">
+      <form method="post" id="contactForm">
 
         <div id="accordion">
           <!-- Service Accordion -->
@@ -321,6 +321,7 @@
                   <option value="3">Full Repair/Maintenance</option>
                   <option value="3">Other Inquiries</option>
                 </select>
+                <span id="serviceError" class="errorMsg"></span>
                 <hr>
                 <h2><i class="fas fa-users"></i> Mechanics</h2>
                 <p>Please select your technican</p>
@@ -332,6 +333,7 @@
                   <option value="3">Stewart</option>
                   <option value="4">No preference</option>
                 </select>
+                <p id="technicanError" class="errorMsg"></p>
                 <hr>
                 <!-- notify user of the availability of technican before selecting time, let them block dates that arent bookable and let users know-->
                 <h2><i class="fas fa-calendar-plus"></i> Appointment Time</h2>
@@ -340,10 +342,12 @@
                 <div class="request-label">
                   <label for="appTime">Choose an appointment date: </label>
                   <input type="text" id="datepicker">
+                  <p id="dateError" class="errorMsg"></p>
                   <div>
                     <label for="appt-time">Choose an appointment time (8:30am - 10:00pm): </label>
                     <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00">
                     <span class="validity"></span>
+                    <p id="timeError" class="errorMsg"></p>
                   </div>
                 </div>
               </div>
@@ -366,25 +370,29 @@
                 <!-- <form> -->
                   <div class="form-group">
                     <div class="row">
-                      <div class="col-6" style="float: right;">
+                      <div class="col-6 accountLabel" style="float: right;">
                         <label for="fnameLabel">First Name</label>
                         <input type="text" id="fname" name="firstname" placeholder="First Name">
+                        <p id="fnameError" class="errorMsg"></p>
                       </div>
-                      <div class="col-6">
+                      <div class="col-6 accountLabel">
                         <label for="lnameLabel">Last Name</label>
                         <input type="text" id="lname" name="lastname" placeholder="Last Name">
+                        <p id="lnameError" class="errorMsg"></p>
                       </div>
                     </div>
                   </div>
                   <div class="form-group">
                     <div class="row">
-                      <div class="col-6" style="float: right;">
+                      <div class="col-6 accountLabel" style="float: right;">
                         <label for="phoneNumLabel">Phone Number</label>
                         <input type="text" id="phoneNum" name="phoneNumber" placeholder="Phone Number">
+                        <p id="phoneNumberError" class="errorMsg"></p>
                       </div>
-                      <div class="col-6">
+                      <div class="col-6 accountLabel">
                         <label for="emailLabel">Email</label>
                         <input type="text" id="email" name="email" placeholder="Email">
+                        <p id="emailError" class="errorMsg"></p>
                       </div>
                     </div>
                   </div>
@@ -393,25 +401,29 @@
                   <p>Please fill the spaces below with your payment information</p>
                   <div class="form-group">
                     <div class="row">
-                      <div class="col-6" style="float: right;">
+                      <div class="col-6 accountLabel" style="float: right;">
                         <label for="cardHolderLabel">Name on the card</label>
                         <input type="text" id="cardHolder" name="cardHolder" placeholder="Name on the Card">
+                        <p id="cardHolderError" class="errorMsg"></p>
                       </div>
-                      <div class="col-6">
+                      <div class="col-6 accountLabel">
                         <label for="creditCardLabel">Credit Card</label>
                         <input type="text" id="creditCard" name="creditCard" placeholder="Credit Card">
+                        <p id="creditCardError" class="errorMsg"></p>
                       </div>
                     </div>
                   </div>
                   <div class="form-group">
                     <div class="row">
-                      <div class="col-4">
+                      <div class="col-4 accountLabel">
                         <label for="expiryDateLabel">Expiry Date</label>
                         <input type="text" id="expiryDate" name="expiryDate" placeholder="Expiry Date">
+                        <p id="expiryDateError" class="errorMsg"></p>
                       </div>
-                      <div class="col-2">
+                      <div class="col-2 accountLabel">
                         <label for="cvvLabel">CVV</label>
-                        <input type="text" id="expiryDate" name="cvv" placeholder="CVV">
+                        <input type="text" id="cvv" name="cvv" placeholder="CVV">
+                        <p id="cvvError" class="errorMsg"></p>
                       </div>
                     </div>
                   </div>
@@ -423,7 +435,7 @@
         <br>
         <br>
         <!--<input type="submit" value="Submit"> -->
-        <button type="button" class="btn btn-lg btn-outline-secondary alert" id="submitButton"">Submit</button>
+        <button type="button" class="btn btn-lg btn-outline-secondary" id="submitButton" onclick="validateForm()">Submit</button>
       </form>
     </div>
   </section>
diff --git a/scripts/index.js b/scripts/index.js
index a14a512..7cbe0fb 100644
--- a/scripts/index.js
+++ b/scripts/index.js
@@ -1,55 +1,139 @@
-// Calendar Validation
 function toAppointment() {
-  document.getElementById('appointment').scrollIntoView();
+    document.getElementById('appointment').scrollIntoView();
 }
-
+// Calendar Validation
+// //logic was gotten from
+// https://forum.jquery.com/topic/disable-single-day-of-a-week-in-datepicker
 var value = 0;
 
 $(function() {
-  $("#datepicker").datepicker({
-    beforeShowDay: getAvailability
-  });
+    $("#datepicker").datepicker({
+        beforeShowDay: getAvailability
+    });
 });
 
 function getMechanic(selectObject) {
-  value = selectObject.value;
+    value = selectObject.value;
 }
 
 function getAvailability(date) {
 
-  if (value == 1 && (date.getDay() === 0 || date.getDay() == 6)) /* restrict weekends */
-    return [false]
-  if (value == 2 && (date.getDay() === 0 || date.getDay() == 1 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict M,Thurs, Fri, Sat, Sun */
-    return [false]
-  if (value == 3 && (date.getDay() === 0 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict Thurs, Fri, Sat, Sun */
-    return [false]
-  if (date.getDay() === 0 || date.getDay() == 6) /* weekends */
-    return [false]
-  else
-    return [true, "", ""]
+    if (value == 1 && (date.getDay() === 0 || date.getDay() == 6)) /* restrict weekends */
+        return [false]
+    if (value == 2 && (date.getDay() === 0 || date.getDay() == 1 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict M,Thurs, Fri, Sat, Sun */
+        return [false]
+    if (value == 3 && (date.getDay() === 0 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict Thurs, Fri, Sat, Sun */
+        return [false]
+    if (date.getDay() === 0 || date.getDay() == 6) /* weekends */
+        return [false]
+    else
+        return [true, "", ""]
 }
 
+//grab my Form
+var form = $('#contactForm');
+
 //Form Validation
-function validateForm(){
-  //first check that the user has selected,
-  var serviceSelected = $('#selectService option:selected').val();
-  console.log(optionSelected);
-  if (serviceSelected === "Select Service"){
-    alert("*Please select a service");
-  }
+function validateForm() {
+    //first check that the user has selected,
+    var serviceSelected = $('#selectService option:selected').val();
+    if (serviceSelected === "Select Service") {
+        $('#serviceError').html("*Please select a service");
+    } else {
+        $('#serviceError').html("");
+    }
 
-  //next check for the technician selected by the users
-  var technicanSelected = $('#technicanSelected option:selected').val();
-  console.log(technicanSelected);
-  if(technicanSelected === "Select technican"){
-    alert("*Please select a technican")
-  }
+    //next check for the technician selected by the users
+    if ($('#selectTechnican option:selected').val() === "Select technican") {
+        $('#technicanError').html("*Please select a technican");
+    } else {
+        $('#technicanError').html("");
+    }
 
-  //next, check for appointment date selection
-  //next, check for appointment time selection
+    //next, check for appointment date selection
+    if ($('#datepicker').val() === "") {
+        $('#dateError').html("*Please select an appointment Date");
+    } else {
+        $('#dateError').html("");
+    }
+    //next, check for appointment time selection
+    var timeSelected = $('#appt-time').val();
+    if ($('#appt-time').val() === "") {
+        $('#timeError').html("*Please select an appointment time");
+    } else {
+        $('#timeError').html("");
+    }
+    // Account Section
+    // //check the first Name Field
+    if ($('#fname').val() === "" || !$('#fname').val().length) {
+        $("#fnameError").html("*Please enter your first name");
+    } else {
+        $("#fnameError").html("");
+    }
+    //check the last name field
+    if ($('#lname').val() === "" || !$('#lname').val().length) {
+        $("#lnameError").html("*Please enter your last name");
+    } else {
+        $("#lnameError").html("");
+    }
+    //check the phone number Field and validate phone number
+    // var phoneNumber = $('#phoneNum').val();
+    //this filter was gotten from this website to valid the phone Number *https://www.w3resource.com/javascript/form/phone-no-validation.php*
+    var phoneFilter = /^\d{10}$/;
+    // console.log(phoneNumber);
+    if ($('#phoneNum').val() === "" || !$('#phoneNum').val().length) {
+        $("#phoneNumberError").html("*Please enter your Phone Number");
+    } else if (!$('#phoneNum').val().match(phoneFilter)) {
+        $("#phoneNumberError").html("*Invalid phone number please enter a 10 digit number");
+    } else {
+        $("#phoneNumberError").html("");
+    }
+    //source of this is from the link below
+    //https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
+    var emailFilter = /^\S+@\S+$/;
+    if ($('#email').val() === "" || !$('#email').val().length) {
+        $("#emailError").html("*Please enter your email Address");
+    } else if (!$('#email').val().match(emailFilter)) {
+        $("#emailError").html("*Please enter a valid email address");
+    } else {
+        $("#emailError").html("");
+    }
 
-  // Account Section
-  //check for creditCard holder name
-  // check for credit card Format.
-  // check for t
-}
+
+    // console.log(cardHolder);
+    if ($('#cardHolder').val() === "" || !$('#cardHolder').val().length) {
+        $("#cardHolderError").html("*Please enter name on the card");
+    } else {
+        $("#cardHolderError").html("");
+    }
+
+    //the logic used for the filters in this section was gotten from
+    ////https://stackoverflow.com/questions/6176802/how-to-validate-a-credit-card-number
+    var creditFilter = /^\d{16}$/;
+
+    if ($('#creditCard').val() === "" || !$('#creditCard').val().length) {
+        $("#creditCardError").html("*Please enter your valid credit card number");
+    } else if (!$('#creditCard').val().match(creditFilter)) {
+        $("#creditCardError").html("*Invalid credit card number. Please enter a valid 16 digit credit card");
+    } else {
+        $("#creditCardError").html("");
+    }
+
+    var expiryFilter = /^\d{4}$/;
+    if ($('#expiryDate').val() === "" || !$('#expiryDate').val().length) {
+        $("#expiryDateError").html("*Please enter your credit card expiry date");
+    } else if (!$('#expiryDate').val().match(expiryFilter)) {
+        $("#expiryDateError").html("*Invalid expiry date. Please enter a valid expiry date of format MMYY!");
+    } else {
+        $("#expiryDateError").html("");
+    }
+
+    var cvvFilter = /^\d{3}$/;
+    if ($('#cvv').val() === "" || !$('#cvv').val().length) {
+        $("#cvvError").html("*Please enter your credit card CVV");
+    } else if (!$('#cvv').val().match(cvvFilter)) {
+        $("#cvvError").html("*Please enter 3 digit number");
+    } else {
+        $("#cvvError").html("");
+    }
+}
\ No newline at end of file