Django Form, check validate before submit. (HTML) - html

Question

For a regular html form, I could use java script to validate input onsubmit, which means the submit button is work only for a valid input, hence no http response required.
However, I am unable to do the same thing for a django form.
A Django form in html is simply as {{form}}.
for example {{form.title}} is the form for title.
So I am looking for a way to validate the Django form at front end (in HTML). only the valid input would be post

Answer 1

Not Django specific. Its a frontend Javascript framework Job. Or if you are certain that your webapps's target audience is all latest browser oriented, supporting HTML5, then go for HTML form validations (source) .
If you do not want to go for client side validation and re-use your Django's validation code, then I would suggest serialize and submit the form using ajax. You could get a JSON reply and parse it using javascript, or get the whole updated form back(using Django's template engine) and update the DOM. In case you need a sample, let me know which method you are opting for. Hope this helps.

Answer 2

Include jquery validator
<script type="text/javascript" src="{% static 'js/jquery.validate.min.js' %}"></script>
In contact.html
Loader .gif while you send form
<div id="loadingDiv" class="hiddenClass">
<p><img src="{% static "images/ajax-loader.gif" %}" alt="loader" ><br/>Please wait... while we...<p>
</div>
your form code in contact.html
<form method="post" action="/contact/send/" id="contact_wrap">
<div class="name">
<label class="label">Name <span class="required">*</span></label>
<input name= "firstname" id="firstname" class="inputtext" type="text" maxlength="20" size="12" placeholder="First Name"/>
</span>
</div>
<-- your code -->
</form>
submit button in contact.html
<div class="button">
<input id="submitform" class="submitform" type="submit" name="submitform" value="Send" />
</div>
script to validate form in contact.html
<script>
$(function() {
$( "#contact_wrap" ).validate({
errorClass: "my-error-class", //apply a css class for error if you have style for valid
validClass: "my-valid-class", //apply a css class for error if you have style for error
rules: {
firstname: {
required: true
},
},
messages: {
firstname: {
required: "Please enter your First Name."
},
},
});
});
</script>
To check validation before submit in contact.html
show ajax-loader.gif from loading div
<script>
$( "#submitform" ).click(function() {
if ($('#contact_wrap').valid()) $( "#loadingDiv" ).removeClass( "hiddenClass" ).addClass( "showClass" );
});
</script>