Starting with our inputs, we will add some constraints to enable client-side validation

Kuali University: Apply Now

Lab 2: Validation and Constraints

Lab Objectives

Understand how validation works in the UI

Setup some constraints

Demonstrate different types of constraints

2

Lab 2 Validation and Constraints

Now that we have the sections and InputFields set up, lets add some constraints

Constraints allow us to apply validations to our InputFields

All validations performed by constraints are supported on the client-side (as well as the server side through a validation service)

The user will immediately see the result of constraint validation when they make a mistake, allowing them to fix it easily

Attempting to submit a form without fixing errors will halt that action and give the user a summary of fields/sections that have errors

All of this functionality is automatic by just setting up your constraints on your InputFields!

3

Instructions

1) Open up the file view definition file TrainingApplicationView-Lab2.xml 2) Find the field that has a validCharactersConstraint on it (the firstName property field). This InputField is applying an AlphaPatternConstraint to its input (users can only enter alpha charactersfor this field)

Lab 2 Validation and Constraints

3) Copy the validCharactersConstraint property (and its inner content)

4) Let’s put this same constraint on other InputFields where it makes sense: Add it to the lastName, city, and state InputFields.

4

Instructions 5) Let’s add some more validCharactersConstraints to the other fields. Following the same validCharactersConstraint property process, add different constraints for:

email - EmailAddressPatternConstraint zip – ZipcodePatternConstraint address1 - AlphaNumericWithBasicPunc address2 – AlphaNumericWithBasicPunc dob - BasicDatePatternConstraint

6) Now find the firstName field again. You may have noticed a property called “required” set with “true”. This constraint property means that this field is required by the user to fill out before the form can be submitted.

Add this property to every InputField on the View besides the field campus, address2, and emailList.

Lab 2 Validation and Constraints

7) Additionally, add the property minLength and maxLength to the zip InputField and set both minLength to “5” and maxLength to “10”. These constraints will ensure the user enters only 5-10 characters in this field. Do the same for the state InputField, but set both the values to “2”.

8) Start up your application and see the result of the validation constraints you added by typing in invalid input or skipping required fields. Then see the result of correcting the invalid input.

Solution:

6

Partial Solution - Your code should look approximately like this:

Lab 2 Validation and Constraints

<bean parent="Uif-InputField" p:label="First Name" p:propertyName="firstName" p:required="true">

<property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Last Name" p:propertyName="lastName" p:required="true"> <property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Email Address" p:propertyName="email" p:required="true"> <property name="validCharactersConstraint"> <bean parent="EmailAddressPatternConstraint"/> </property> </bean>

7

Partial Solution - Your code should look approximately like this :

Lab 2 Validation and Constraints

<bean parent="Uif-InputField" p:label="State" p:propertyName="state" p:required="true" p:maxLength="2“ p:minLength="2"> <property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Zip" p:propertyName="zip" p:required="true" p:maxLength="10“ p:minLength="5"> <property name="validCharactersConstraint"> <bean parent="NumericPatternConstraint"/> </property> </bean>

Advanced Features:

9

Lab 2 Extra Info and Exercises

There are additional constraints that you can apply for even more types of validations:

exclusiveMin, inclusiveMax (for minimum and maximum numeric values)

Prerequisite Constraints Must Occur Constraints Case Constraints Additional validCharactersConstraint options

You can even apply constraints based on the “state” of an object through State-based Validation

10

Lab 2 Extra Info and Exercises

Prerequisite Constraints A prerequisite constraint defines what fields must be filled out WITH this field.

Extra Exercise 1: 1) Let’s add a PrerequisiteConstraint for address2, requiring that address1 be filled out before you can fill out address2.

2) Set the “dependencyConstraints” property on the InputField to the following:

3) Start the app and see what happens when you try to fill out address2 after putting nothing in address1

<property name="dependencyConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName=“address2"/> </list> </property>

11

Lab 2 Extra Info and Exercises

Must Occur Constraints MustOccurConstraint is used to identify fields that are required before this field can be filled out.  This differs from PrerequisiteConstraints because the number of fields required from different sets of fields can be defined.

<bean parent="MustOccurConstraint"> <property name="min" value="1" /> <property name="max" value="2" /> <property name="prerequisiteConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName="field11"/> </list> </property> <property name="mustOccurConstraints"> <list> <bean parent="MustOccurConstraint"> <property name="min" value="2" /> <property name="max" value="2" /> <property name="prerequisiteConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName="field12" /> <bean parent="PrerequisiteConstraint" p:propertyName="field13" /> </list> </property> </bean> </list> </property> </bean>

This means that field11 OR field12 with field13 must be filled out before the field this constraint applies to can have a value. This particular constraint as defined here also allows all 3 fields to be filled out.

However, if max at the top level was 1 instead, it would mean: either field11 OR field12 with field13 must be filled out (all 3 together not allowed).

12

Lab 2 Extra Info and Exercises

Case Constraints A CaseConstraint provides the ability to only apply a certain constraint when a defined case/condition is satisfied. 

The constraint or constraints used can be any of the constraints discussed, in addition to nesting another CaseConstraint within itself.

Extra Exercise 2: 1) Let’s add a CaseConstraint for campus, making it required when college equals “csc” or “art”.

2) By default, CaseConstraint does an equals comparison. We set the propertyName on CaseConstraint to “college” and fill out the rest of the constraint to look like this

3) Start up the app and see that campus

is required when you select csc or art.

<property name="caseConstraint"> <bean parent="CaseConstraint"> <property name="propertyName" value="college"/> <property name="whenConstraint"> <list> <bean parent="WhenConstraint"> <property name="values"> <list> <value>art</value> <value>csc</value> </list> </property> <property name="constraint"> <bean parent="RequiredConstraint"/> </property> </bean> </list> </property> </bean> </property>

13

Lab 2 Extra Info and Exercises

Notes on Case Constraints• There is a list of WhenConstraints in case constraints, by adding additional WhenConstraints, it is equivalent to OR (if this property equals value A apply this constraint OR if this property equals value B apply this other constraint).

• By adding nested CaseConstraints within WhenConstraints it is equivalent to AND (if this property equals value A AND this other property equals value B, then apply this constraint)

• CaseConstraint also allows other operators other than equals:

•NOT_EQUAL, GREATER_THAN_EQUAL, LESS_THAN_EQUAL, GREATER_THAN, LESS_THAN, and HAS_VALUE (has value means has any value)

14

Lab 2 Extra Info and Exercises

•AlphaNumericPatternConstraint •AlphaPatternConstraint •AnyCharacterPatternConstraint •CharsetPatternConstraint •NumericPatternConstraint •AlphaNumericWithBasicPunc •AlphaWithBasicPunc •NumericWithOperators •FixedPointPatternConstraint • IntegerPatternConstraint•DatePatternConstraint•BasicDatePatternConstraint•FloatingPointPatternConstraint

•PhoneNumberPatternConstraint •TimePatternConstraint •Time24HPatternConstraint •UrlPatternConstraint •NoWhitespacePatternConstraint •JavaClassPatternConstraint •EmailAddressPatternConstraint •TimestampPatternConstraint •YearPatternConstraint •MonthPatternConstraint •ZipcodePatternConstraint

All Available default ValidCharactersConstraints (many have options to customize further):

15

Lab 2 Extra Info and Exercises

• In addition to the above defined ValidCharacterConstraints, you can define your own ValidCharactersConstraint by defining the regex property “value” directly.  Custom configurations must have a messageKey defined.

All Available default ValidCharactersConstraints (many have options to customize further):

<bean parent="Uif-InputField" p:instructionalText="custom valid characters constraint - this one accepts only 1 alpha character followed by a period and then followed by a number (a.8, b.0, etc)" p:propertyName="field1"> <property name="validCharactersConstraint"> <bean parent="ValidCharactersConstraint" p:value="^[a-zA-Z]\.[0-9]$" p:messageKey="validation.aDotNumTest"/> </property></bean>

Bonus Exercise: Change one of your InputFields to use a customized ValidCharactersConstraint that you define the regex for (just set messageKey to the validation message you want to display for invalid input – messageKey is an additional topic entirely)