From d31b05a2198447168c169e3efa4b0f3b9062cea6 Mon Sep 17 00:00:00 2001
From: "M.Ravi" <mondi.ravi@gmail.com>
Date: Tue, 6 Jun 2017 05:26:02 +0530
Subject: [PATCH] Added jquery validation for the order form

---
 .../templates/datacenterlight/pricing.html    | 67 ++++++++++++++-----
 1 file changed, 49 insertions(+), 18 deletions(-)

diff --git a/datacenterlight/templates/datacenterlight/pricing.html b/datacenterlight/templates/datacenterlight/pricing.html
index da13d5e1..5d32e006 100644
--- a/datacenterlight/templates/datacenterlight/pricing.html
+++ b/datacenterlight/templates/datacenterlight/pricing.html
@@ -107,7 +107,7 @@
 		<div class="card">
       <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
 			 <div class="caption">
-            <form method="POST" action="">
+            <form id="order_form" method="POST" action="">
 				{% csrf_token %}
               
                 <div class="title">
@@ -166,6 +166,9 @@
               <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
 
             </form>
+          </div>
+          <div>
+				<div id="error_message_box" class="error-message-box"></div>
           </div>
 		</div>
 
@@ -216,23 +219,51 @@
 
     <!-- jQuery -->
     <script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
-
-<script type="text/javascript">
-      window.onload=function(){
-        $('.selectpicker').selectpicker({
-             style: 'btn-link',
-             windowPadding: 10,
-        });
-
-        var hash = window.location.hash.substr(1);
-        console.log(hash);
-        if (hash == 'requestform'){
-            $('#reques-success-message').modal('show');
-        }
-
-       };
-</script>
-
+    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
+    <script type="text/javascript">
+           $(document).ready(function(){    
+               $.validator.setDefaults({
+                   ignore: []
+               });
+               
+               $('#order_form').validate({
+                   wrapper: 'div',
+                   errorLabelContainer: "#error_message_box",
+                   rules: {
+                       name: {
+                           required: true,
+                           minlength: 3
+                       },
+                       email: {
+                           required: true,
+                           email: true
+                       }
+                   },
+                   messages: {
+                       name: "Please enter your name",
+                       email: "Please enter a valid email address"
+                   },
+                   submitHandler: function (form) {
+                       return true;
+                   }               
+               });
+           });
+    
+          window.onload=function(){
+            $('.selectpicker').selectpicker({
+                 style: 'btn-link',
+                 windowPadding: 10,
+            });
+    
+            var hash = window.location.hash.substr(1);
+            console.log(hash);
+            if (hash == 'requestform'){
+                $('#reques-success-message').modal('show');
+            }
+    
+           };
+    </script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
 
     <!-- Bootstrap Core JavaScript -->