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,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 -->