Validation

Unicorn uses Django forms infrastructure for all validation. This means that a form could be re-used between any other Django views and a Unicorn.

Using the Django forms system provides a way to serialize/deserialize certain classes (for example, datetime and uuid) and a way to validate properties of a class.

Note

There are many built-in fields available for Django form fields which can be used to validate text inputs.

# book.py
from django_unicorn.components import UnicornView
from django import forms

class BookForm(forms.Form):
    title = forms.CharField(max_length=100, required=True)
    publish_date = forms.DateField(required=True)

class BookView(UnicornView):
    form_class = BookForm

    title = ""
    publish_date = ""

<!-- book.html -->
<div>
  <input unicorn:model="title" type="text" id="title" /><br />
  <input unicorn:model="publish_date" type="text" id="publish-date" /><br />
  <button unicorn:click="$validate">Validate</button>
</div>

Because of the form_class = BookForm defined on the UnicornView above, Unicorn will automatically validate that the title has a value and is less than 100 characters. The publish_date will also be converted into a datetime from the string representation in the text input.

Showing validation errors

As the form is filled out the appropriate inputs will be validated. There are a few ways to show the validation messages.

Highlighting the invalid form

When a model form is invalid, a special unicorn:error attribute is added to the element. Depending on whether it is an invalid or required error code, the attribute will be unicorn:error:invalid or unicorn:error:required. The value of the attribute will be the validation message.

<!-- highlight-input-errors.html -->
<div>
  <style>
    [unicorn\:error\:invalid] {
      border: 1px solid red !important;
    }
    [unicorn\:error\:required] {
      border: 1px solid red !important;
    }
  </style>

<input
  unicorn:model="publish_date"
  type="text"
  id="publish-date"
  unicorn:error:invalid="Enter a valid date/time."
/><br />

</div>

Showing a specific error message

<!-- show-error-message.html -->
<div>
  <input unicorn:model="publish_date" type="text" id="publish-date" /><br />
  <span class="error">{{ unicorn.errors.publish_date.0.message }}</span>
</div>

Showing all the error messages

There is a unicorn_errors template tag that shows all errors for the component. It should provide an example of how to display component errors in a more specific way if needed.

<!-- show-all-error-messages.html -->
{% load unicorn %}

<div>
  {% unicorn_errors %}

  <input unicorn:model="publish_date" type="text" id="publish-date" /><br />
</div>

Validate the entire component

The magic action method $validate can be used to validate the whole component by the front-end.

<!-- validate.html -->
<div>
  <input unicorn:model="publish_date" type="text" id="publish-date" /><br />
  <button unicorn:click="$validate">Validate</button>
</div>

The validate method can also be used inside of the component.

# validate.py
from django_unicorn.components import UnicornView
from django import forms

class BookForm(forms.Form):
    title = forms.CharField(max_length=6, required=True)

class BookView(UnicornView):
    form_class = BookForm

    text = "hello"

    def set_text(self):
        self.text = "hello world"
        self.validate()

The is_valid can also be used inside of the component to check if a component is valid.

# validate.py
from django_unicorn.components import UnicornView
from django import forms

class BookForm(forms.Form):
    title = forms.CharField(max_length=6, required=True)

class BookView(UnicornView):
    form_class = BookForm

    text = "hello"

    def set_text(self):
        if self.is_valid():
            self.text = "hello world"