10. Practice Projects
Prev Chapter 8. Implementing Constraint Validation in a Plain JS Web App Next

10. Practice Projects

For the following projects, you have to take care of

  1. adding, for every property, a check function that validates the constraints defined for the property, and a setter method that invokes the check function and is to be used for setting the value of the property,

  2. performing validation before any data is saved in the add and update methods.

in the model code of your app, while In the user interface ("view") code you have to take care of

  1. styling the user interface with CSS rules (for instance, by integrating a CSS library such as Yahoo's Pure CSS),

  2. validation on user input for providing immediate feedback to the user,

  3. validation on form submission for preventing the submission of invalid data.

Make sure that your pages comply with the XML syntax of HTML5 by means of XHTML5 validation (setting the validator field Preset to "HTML5 + SVG 1.1 + MathML 3.0"), and that your JavaScript code complies with our Coding Guidelines and its style is checked with JSHint.

If you have any questions about how to carry out the following projects, you can ask them on our discussion forum.

10.1. Project 1 - Validate movie data

The purpose of the app to be built is managing information about movies. Like in the book data management app discussed in the tutorial, you can make the simplifying assumption that all the data can be kept in main memory. Persistent data storage is implemented with JavaScript's Local Storage API.

The app deals with just one object type: Movie, as depicted in the following class diagram.

In this model, the following constraints have been expressed:

  1. Due to the fact that the movieId attribute is declared to be the standard identifier of Movie, it is mandatory and unique.

  2. The title attribute is mandatory, as indicated by its multiplicity expression [1], and has a string length constraint requiring its values to have at most 120 characters.

  3. The releaseDate attribute has an interval constraint: it must be greater than or equal to 1895-12-28.

Notice that the releaseDate attribute is not mandatory, but optional, as indicated by its multiplicity expression [0..1].

In addition to the constraints described in this list, there are the implicit range constraints defined by assigning the datatype PositiveInteger to movieId, NonEmptyString to title, and Date to releaseDate. In our plain JavaScript approach, all these property constraints are coded in the model class within property-specific check functions.

You can use the following sample data for testing your app:

Table 8.2. Sample data about movies

Movie ID Title Release date
1 Pulp Fiction 1994-05-12
2 Star Wars
3 Casablanca 1943-01-23
4 The Godfather 1972-03-15


More movie data can be found on the IMDb website.

10.2. Project 2 - Validate country data

The purpose of the app to be built is managing information about countries. The app deals with just one object type: Country, as depicted in the following class diagram.

In this model, the following constraints have been expressed:

  1. Due to the fact that the name attribute is declared to be the standard identifier of Country, it is mandatory and unique.

  2. The name attribute has a string length constraint requiring its values to have at least 3 and at most 50 characters.

  3. The population attribute is mandatory, as indicated by the multiplicity expression [1] appended to the attribute name.

  4. The lifeExpectancy attribute is also mandatory and has an interval constraint: its values must be less than or equal to 100.

Notice that the militaryExpenditure attribute is not mandatory, but optional, as indicated by its multiplicity expression [0..1].

In addition to the constraints described in this list, there are the implicit range constraints defined by assigning the datatypes NonEmptyString to name, PositiveInteger to population, PositiveDecimal to lifeExpectancy and Percentage to militaryExpenditure (hint: a percentage value is a decimal number between 0 and 100). In our plain JavaScript approach, all these property constraints are coded in the model class within property-specific check functions.

You can use the sample data shown in the following table for testing your app.

Table 8.3. Sample data about countries

Name Population Life expectancy Military expend. (% GDP)
Germany 80,854,408 80.57 1.35
France 66,553,766 81.75 1.9
Russia 142,423,773 70.47 3.49
Monaco 30,535 89.52

More data about countries can be found in the CIA World Factbook.

Prev Up Next
9. Points of Attention Home 11. Quiz Questions