[add] client side validation

resources/views/contact.blade.php

@@ -70,21 +70,21 @@
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Email address</label>
-                                        <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" onkeyup="contactEmail()">
+                                        <input type="email" name = "email" class="form-control" placeholder="Your email address" value="" id="contact-email" onkeyup="contactEmail()">
                                     </div>
                                     <span class="error" id='contact-email-error'></span>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Phone number</label>
-                                        <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" onkeyup="contactPhone()">
+                                        <input type="number" name = "phone" class="form-control" placeholder="Your phone number" value="" id="contact-phone" onkeyup="contactPhone()">
                                     </div>
                                     <span class="error" id='contact-phone-error'></span>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="">Nationality</label>
-                                        <input type="text" name = "nationality" class="form-control" placeholder="Your nationality">
+                                        <input type="text" name = "nationality" class="form-control" placeholder="Your nationality" id="contact-nationality" onkeyup="contactNationality()">
                                     </div>
                                     <span class="error" id='contact-nationality-error'></span>
                                 </div>
@@ -135,9 +135,52 @@
             }
        }
 
+       function contactEmail(){
+            var email = document.getElementById('contact-email').value;
+            if(email.length == 0){
+                $('#contact-email').focus();
+                emailError.innerHTML = "Email field is required !";
+                return false;
+            }
+            else{
+                emailError.innerHTML = '';
+                return true;
+            }
+        }
+
+        function contactPhone(){
+            var phone = document.getElementById('contact-phone').value;
+            if(phone.length == 0){
+                $('#contact-phone').focus();
+                phoneError.innerHTML = "Phone number is required !";
+                return false;
+            }
+            if(!phone.match(/^\d{10}$/)){
+                phoneError.innerHTML = "Please provide valid 10 digit number";
+                return false;
+            }
+            else{
+                phoneError.innerHTML = '';
+                return true;
+            }
+        }
+
+        function contactNationality(){
+            var nationality = document.getElementById('contact-nationality').value;
+            if(nationality.length == 0){
+                $('#contact-nationality').focus();
+                nationalityError.innerHTML = "Nationality field is required !";
+                return false;
+            }
+            else{
+                nationalityError.innerHTML = '';
+                return true;
+            }
+        }
 
        function validateContact(){
-            if(!contactFullname()){
+            if(!contactFullname() || !contactEmail() || !contactPhone() ||
+            !contactNationality()){
                 return false;
             }
             else{