Added jquery validation for the order form

This commit is contained in:
M.Ravi 2017-06-06 05:26:02 +05:30
parent 74c57a42db
commit d31b05a219

View file

@ -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,8 +219,37 @@
<!-- 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"> <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(){ window.onload=function(){
$('.selectpicker').selectpicker({ $('.selectpicker').selectpicker({
style: 'btn-link', style: 'btn-link',
@ -232,7 +264,6 @@
}; };
</script> </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 -->