Validating user input

The code in this section is the complete listing of a Reahl web application which demonstrates the validation of a single item that can be input by a user.

The application will render a sole text input on its home page:

Screenshot showing a single input.

The user is expected to type a valid email address into the input. When the user types something into the input and hits tab (for example), the typed input is checked and a useful 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. For example, if the user deletes the invalid email address, the message changes:

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.

The validation shown above is done in a user’s browser using JavaScript. Doing validation using JavaScript is desirable because it gives immediate feedback to the user. There is a problem with doing validation in JavaScript, however: a user could disable JavaScript and bypass such validation.

Reahl guards against this scenario by re-checking the same validation rules on the server side when the user clicks on a button. If the validation fails, the same page is shown again with exactly the same error messages, format and styling shown above for the JavaScript version.

Here is a listing of the code, 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 TwoColumnPage, 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(TwoColumnPage):
    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

A tabbed panel example

Next topic

Layout example