Updated Pricing Form with updated error messages

This commit is contained in:
Mondi Geetha 2017-07-03 23:31:35 +05:30
parent 36976d923e
commit e19d2e3c13

View file

@ -136,15 +136,15 @@
</div> </div>
<!-- /.container --> <!-- /.container -->
</div> </div>
<!-- /.content-section-b --> <!-- /.content-section-b -->
<div class="content-section-a pricing-section" id="price"> <div class="content-section-a pricing-section" id="price">
<div class="container"> <div class="container">
<!-- Page Features --> <!-- Page Features -->
<div class="row text-center"> <div class="row text-center">
<div class="col-xs-12 col-md-6 text"> <div class="col-xs-12 col-md-6 text">
<h2 class="section-heading">{% trans "Starting from only 15CHF per month. Try now." %}</h2> <h2 class="section-heading">{% trans "Simple and affordable: Try our virtual machine with featherlight price." %}</h2>
<p class="lead">{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p> <p class="lead">{% trans "Affordable VM hosting based in Switzerland" %}</p>
</div> </div>
<div class="col-xs-12 col-md-6 hero-feature"> <div class="col-xs-12 col-md-6 hero-feature">
@ -152,7 +152,7 @@
<div class="landing card"> <div class="landing 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 id="order_form" method="POST" action=""> <form id="order_form" method="POST" action="" data-toggle="validator" role="form">
{% csrf_token %} {% csrf_token %}
<div class="title"> <div class="title">
<h3>{% trans "VM hosting" %} </h3> <h3>{% trans "VM hosting" %} </h3>
@ -165,28 +165,37 @@
</div> </div>
</div> </div>
<div class="descriptions"> <div class="descriptions">
<div class="description"> <div class="description form-group">
<p>{% trans "Hosted in Switzerland" %}</p> <p>{% trans "Hosted in Switzerland" %}</p>
</div> </div>
<div class="description"> <div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i> <i class="fa fa-minus-circle left" data-minus="cpu" aria-hidden="true"></i>
<input class="input-price" type="number" min="1" max="42" id="coreValue" name="cpu"> <input class="input-price select-number" type="number" min="1" max="42" id="coreValue" name="cpu" data-error="{% trans 'Please enter a value greater than or equal to 1.' %}" required>
<span> Core</span> <span> Core</span>
<i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i> <i class="fa fa-plus-circle right" data-plus="cpu" aria-hidden="true"></i>
</div>
<div class="help-block with-errors"></div>
</div> </div>
<div class="description"> <div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i> <i class="fa fa-minus-circle left" data-minus="ram" aria-hidden="true"></i>
<input id="ramValue" class="input-price" type="number" min="2" max="200" name="ram"> <input id="ramValue" class="input-price select-number" type="number" min="2" max="200" name="ram" data-error="{% trans 'Please enter a value greater than or equal to 2.' %}" required>
<span> GB RAM</span> <span> GB RAM</span>
<i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i> <i class="fa fa-plus-circle right" data-plus="ram" aria-hidden="true"></i>
</div>
<div class="help-block with-errors"></div>
</div> </div>
<div class="description"> <div class="form-group">
<div class="description input">
<i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i> <i class="fa fa-minus-circle left" data-minus="storage" aria-hidden="true"></i>
<input id="storageValue" class="input-price" type="number" min="10" max="500" step="10" name="storage"> <input id="storageValue" class="input-price select-number" type="number" min="10" max="500" step="10" name="storage" data-error="{% trans 'Please enter a value greater than or equal to 10.' %}" required>
<span>{% trans "GB Storage (SSD)" %}</span> <span>{% trans "GB Storage (SSD)" %}</span>
<i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i> <i class="fa fa-plus-circle right" data-plus="storage" aria-hidden="true"></i>
</div>
<div class="help-block with-errors"></div>
</div> </div>
<div class="description select-configuration input"> <div class="description select-configuration input form-group justify-center">
<label for="config">OS</label> <label for="config">OS</label>
<select name="config" id=""> <select name="config" id="">
{% for template in templates %} {% for template in templates %}
@ -198,21 +207,40 @@
<!--<div class="description check-ip"> <!--<div class="description check-ip">
<input type="checkbox" name="ipv6"> Ipv6 Only<br> <input type="checkbox" name="ipv6"> Ipv6 Only<br>
</div>--> </div>-->
<div class="description input"> <div class="form-group">
<label for="name">{% trans "Name"%}</label> <div class="description input justify-center">
<input type="text" name="name" placeholder="{% trans "Your Name" %}"> <label for="name" class="control-label">{% trans "Name"%}</label>
</div> <input type="text" name="name" class="form-control" placeholder="{% trans 'Your Name'%}" data-minlength="3" data-error="{% trans 'Please enter your name' %}" required>
<div class="description input"> </div>
<label for="email">{% trans "Email" %}</label> <div class="help-block with-errors">
<input type="email" name="email" placeholder="{% trans "Your Email" %}"> {% for message in messages %}
</div> {% if 'name' in message.tags %}
<ul class="list-unstyled"><li>
{{ message|safe }}
</li></ul>
{% endif %}
{% endfor %}
</div>
</div>
<div class="form-group">
<div class="description input justify-center">
<label for="email" class="control-label">{% trans "Email"%}</label>
<input name="email" type="email" pattern="^[^@\s]+@([^@\s]+\.)+[^@\s]+$" class="form-control" placeholder="{% trans 'Your Email' %}" data-error="{% trans 'Please enter a valid email address' %}" required>
</div>
<div class="help-block with-errors">
{% for message in messages %}
{% if 'email' in message.tags %}
<ul class="list-unstyled"><li>
{{ message|safe }}
</li></ul>
{% endif %}
{% endfor %}
</div>
</div>
</div> </div>
<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>
<div id="error_message_box" class="error-message-box"></div>
</div>
</div> </div>
</div> </div>