Added jquery validation for the order form

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,8 +219,37 @@
 
     <!-- jQuery -->
     <script src="{% static 'datacenterlight/js/jquery.js' %}"></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;
+                   }               
+               });
+           });
     
-<script type="text/javascript">
           window.onload=function(){
             $('.selectpicker').selectpicker({
                  style: 'btn-link',
@@ -231,8 +263,7 @@
             }
     
            };
-</script>
+    </script>
-
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js"></script>
 
     <!-- Bootstrap Core JavaScript -->