1. 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! 2

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 characters for this field) 3 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. 4 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.

5. Solution:

6. Partial Solution - Your code should look approximately like this: 6 Lab 2 Validation and Constraints

7. Partial Solution - Your code should look approximately like this : 7 Lab 2 Validation and Constraints

8. Advanced Features:

9. 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 10

11. Lab 2 Extra Info and Exercises Must Occur Constraints 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. 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. 11  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.  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). 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 Case Constraints A CaseConstraint provides the ability to only apply a certain constraint when a defined case/condition is satisfied. 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. The constraint or constraints used can be any of the constraints discussed, in addition to nesting another CaseConstraint within itself. Extra Exercise 2: Extra Exercise 2: 1) Let’s add a CaseConstraint for campus, making it required when college equals “csc” or “art”. 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  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 3) Start up the app and see that campus is required when you select csc or art. is required when you select csc or art. 12 art csc

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) 13

14. 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. 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"> <bean parent="ValidCharactersConstraint" p:value="^[a-zA-Z]\.[0-9]$" p:messageKey="validation.aDotNumTest"/> 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)