{% extends "subscribe-form.html" %} {% load tutorial_tags %} {% block form_title %}Client-Side Form Validation{% endblock %} {% block form_header %}Form validation with AngularJS using only a Django Form{% endblock %} {% block form_tag %}name="{{ form.form_name }}" method="post" action="." novalidate{% endblock %} {% block form_submission %}

Test submission of invalid POST data:

{% endblock %} {% block tutorial_intro %}

This example shows how to let AngularJS validate input fields from a Django Form in a DRY manner.

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 tutorial_intro %} {% block tutorial_code %} {% autoescape off %}
{% pygments "forms/client_validation.py" %}
{% pygments "views/client_validation.py" %}
{% pygments "tutorial/client-validation.html" %}
{% endautoescape %}

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.

{% endblock tutorial_code %}