{% extends "subscribe-form.html" %} {% load tutorial_tags %} {% block main-intro %}
Form validation with AngularJS using only a Django Form
This example shows how to let AngularJS validate input fields from a Django Form in a DRY manner.
{% endblock main-intro %} {% block form_tag %}name="{{ form.form_name }}" method="post" action="." novalidate{% endblock %} {% block form_submission %}
Submission using a POST request:
Test submission of invalid POST data:
The Django forms.Form
class offers many possibilities to validate a given form.
This for obvious reasons is done on the server. However, while typing, it is unacceptable to send
the form's content to the server for continuous validation. Therefore, adding client side form
validation is a good idea and commonly used. But since this validation easily can be bypassed by a
malicious client, the same validation has to occur a second time, when the server receives the
form's data for final processing.
With django-angular, we can handle this without having to re-implement any client side form validation. Apart from initializing the AngularJS application, no JavaScript is required to enable this useful feature.
{% endblock main-tutorial %} {% block main-sample-code %} {% autoescape off %}Here the differences to the Classic Subscription example is, that the
Form now additionally must inherit from the mixin class NgFormValidationMixin
.
Furthermore, the browsers internal Form validation must be disabled. This is achieved by adding
the property novalidate
to the Form's HTML element.