Added jquery validation for the order form
This commit is contained in:
		
					parent
					
						
							
								74c57a42db
							
						
					
				
			
			
				commit
				
					
						d31b05a219
					
				
			
		
					 1 changed files with 49 additions and 18 deletions
				
			
		| 
						 | 
					@ -107,7 +107,7 @@
 | 
				
			||||||
		<div class="card">
 | 
							<div class="card">
 | 
				
			||||||
      <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
 | 
					      <img class="img-beta" src="{% static 'datacenterlight/img/beta-img.png' %}" alt="">
 | 
				
			||||||
			 <div class="caption">
 | 
								 <div class="caption">
 | 
				
			||||||
            <form method="POST" action="">
 | 
					            <form id="order_form" method="POST" action="">
 | 
				
			||||||
				{% csrf_token %}
 | 
									{% csrf_token %}
 | 
				
			||||||
              
 | 
					              
 | 
				
			||||||
                <div class="title">
 | 
					                <div class="title">
 | 
				
			||||||
| 
						 | 
					@ -166,6 +166,9 @@
 | 
				
			||||||
              <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
 | 
					              <input type="submit" class="btn btn-primary" value="{% trans 'Order Now!' %}"></input>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            </form>
 | 
					            </form>
 | 
				
			||||||
 | 
					          </div>
 | 
				
			||||||
 | 
					          <div>
 | 
				
			||||||
 | 
									<div id="error_message_box" class="error-message-box"></div>
 | 
				
			||||||
          </div>
 | 
					          </div>
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -216,23 +219,51 @@
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <!-- jQuery -->
 | 
					    <!-- jQuery -->
 | 
				
			||||||
    <script src="{% static 'datacenterlight/js/jquery.js' %}"></script>
 | 
					    <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: []
 | 
				
			||||||
 | 
					               });
 | 
				
			||||||
               
 | 
					               
 | 
				
			||||||
<script type="text/javascript">
 | 
					               $('#order_form').validate({
 | 
				
			||||||
      window.onload=function(){
 | 
					                   wrapper: 'div',
 | 
				
			||||||
        $('.selectpicker').selectpicker({
 | 
					                   errorLabelContainer: "#error_message_box",
 | 
				
			||||||
             style: 'btn-link',
 | 
					                   rules: {
 | 
				
			||||||
             windowPadding: 10,
 | 
					                       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;
 | 
				
			||||||
 | 
					                   }               
 | 
				
			||||||
 | 
					               });
 | 
				
			||||||
 | 
					           });
 | 
				
			||||||
    
 | 
					    
 | 
				
			||||||
        var hash = window.location.hash.substr(1);
 | 
					          window.onload=function(){
 | 
				
			||||||
        console.log(hash);
 | 
					            $('.selectpicker').selectpicker({
 | 
				
			||||||
        if (hash == 'requestform'){
 | 
					                 style: 'btn-link',
 | 
				
			||||||
            $('#reques-success-message').modal('show');
 | 
					                 windowPadding: 10,
 | 
				
			||||||
        }
 | 
					            });
 | 
				
			||||||
    
 | 
					    
 | 
				
			||||||
       };
 | 
					            var hash = window.location.hash.substr(1);
 | 
				
			||||||
</script>
 | 
					            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/bootstrap-select/1.5.4/bootstrap-select.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <!-- Bootstrap Core JavaScript -->
 | 
					    <!-- Bootstrap Core JavaScript -->
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue