Validating user input

Reahl does validation of user input differently. You declare what Fields of an object can be input by a user. When creating an Input Widget, you link it to such a Field. The same Field can be reused by different Inputs on different screens. (There’s more to Fields than this, but this is the basic idea.)

What you get is validations done in JavaScript on the browser, but the same validations are also performed server-side if the user switched off JavaScript or when a malicious attempt is done to try and circumvent your validations.

Our example only has a single Input, with its EmailField:

Screenshot showing a single input.

If you type an invalid email address and hit tab, the typed input is checked and a specific error message is shown:

Screenshot showing a single input with invalid input, coloured red, with an accompanying error message.

The error message changes while the user types to indicate a different ValidationConstraint is now failing:

Screenshot showing a single input with invalid input, coloured red with a different accompanying error message.

When the input is changed to a valid value, the message disappears:

Screenshot showing a single input with valid input.

Below is the complete source code for this example, followed by an explanation:

from __future__ import print_function, unicode_literals, absolute_import, division

from reahl.web.fw import UserInterface
from reahl.web.ui import HTML5Page, Form, TextInput
from reahl.component.modelinterface import exposed, EmailField

class ValidationUI(UserInterface):
    def assemble(self):
        self.define_view('/', title='Validation demo', page=HomePage.factory())

class HomePage(HTML5Page):
    def __init__(self, view):
        super(HomePage, self).__init__(view, style='basic')

class Comment(object):
    def fields(self, fields):
        fields.email_address = EmailField(label='Email address', required=True)

class CommentForm(Form):
    def __init__(self, view):
        super(CommentForm, self).__init__(view, 'myform')

        comment = Comment()
        self.add_child( TextInput(self, comment.fields.email_address) )

This application models the concept of a Comment, which is meant to represent a comment which can be left by a user. The idea is that users can leave comments, but have to “sign” each comment using their email address.

Comment is said to @expose certain Fields which are used to receive input from a user. In this case, a Comment has an email_address attribute, exposed via an EmailField.

In the code for the CommentForm (the very last line) a TextInput Widget is connected to the email_address field of a particular Comment. This EmailField is responsible for validating user input.

Previous topic

Widgets let you work on a conceptual level

Next topic

Layout example