Skip to main content

This is documentation for Caché & Ensemble.

For information on converting to InterSystems IRISOpens in a new window, see the InterSystems IRIS Migration Guide and Migrating to InterSystems IRIS, both available on the WRC Distributions pageOpens in a new window (login required).

Adding an onvalidate Event Handler

When the form save method executes, Zen invokes the onvalidate event-handler method, if one is defined, for each of the form controls. By implementing an event-handler for a form control we can provide validation for the corresponding field of the form.

Add validation to the State field by completing the following steps:

  1. Add the following client-side method to HomePage.cls

    
     ClientMethod validateState(comp) [ Language = javascript ]
    {
       //State value must be exactly two capital letters
       return (/^[A-Z]{2}$/.test(comp.getValue()));
    }        
    
    Copy code to clipboard
  2. Add values for the onvalidate and invalidMessage attributes of the “State” <text> element. Update the element to look like this

    
    <text label="State" dataBinding="State" size="2"
        onvalidate="return zenPage.validateState(zenThis);" 
        invalidMessage="State must contain 2 capital letters" 
        required="true"
    />            
     
    Copy code to clipboard

Note the following about this validation code:

  • If validateState returns false the form is invalid.

  • validateState returns false if the State field of the form contains anything other than two capital letters. Note that the method is not invoked if the field is empty. In order to validate that the field is not empty, we set required=true on the component.

  • A reference to the text component is passed to validateState using the zenThis variable.

Note:

To learn more about Zen form validation, read Validating Forms in the Zen Forms section of Using Zen Components.

FeedbackOpens in a new window