Web UI fields (Model Node/Model Attributes) validation using JavaScript

Purpose :

It is helpful to know the UI fields validation errors prior to pressing the “Enter” key  or “Save” button .In a situation where there is an error, JavaScript functions are handy in identifying the issues/validations at client side without server round trip.

I have explained how JavaScript functions can be attached to view fields and how JavaScript functions can raise alerts in case of errors when user navigates from one field to another field.

• Created a view with IBHeader (Root object) fields .

                                                                                             

  – IBase

        – IBase Description

        – External ID

• Created default configuration with above three fields.

• Wrote Java Script functions for field contents validation in .htm page

                                                                                                         

• JavaScript Functions:

  These functions are specific to my configuration fields (I wrote these functions with simple functionality to explain how JavaScript functions work on configuration fields). Based on your requirement , if needed , implement more generic functions with parameters.

“UIValidations” function gets the “IBase Description” field contents with “getElementById” document method and checks whether content’s length is less than or equal to 10 characters , if the validation fails,then JavaScript function raises an alert.

“UIValidateNumber” function gets the “External ID” field contents with “getElementById” document method and checks whether contents are numbers or not , if the validation fails,then JavaScript function raises an alert.

• Finding the UI field’s generated ID:

UI field’s ID will get generated as “component_id” “_” “Context_ndoe” “_” “Structure” “.” “fieldname”,so I built the UI element ID with controller component ID , context node and structure field. Example field ID will be like : C1_W1_V2_ibase_struct.descr.

I have explained client side validations using JavaScript functions with the below approaches .Alerts will be raised in case of “onblur” event (which fires when user leaves an input field).

Approach – 1:

In this approach , I first attached the JavaScipt functions to the fields in a function and called this function explicitly.

Approach – 2 :

In this approach , I created a custom class ,attached the interface IF_CHTMLB_FORM_ITERATOR,

implemented method of the interface RENDER_CELL_START and assigned JavaScript functions to the event

“onclientblur” of the input field.

    In “.htm” code , I created the iterator object and assigned to the config.

Execution Process(Validations) :

   Screens to show how JavaScript function displays output in case of validation failure.

• Case – 1 : When IBase Description is less than 10 characters

•         Case – 2 : When External ID contains non-numeric values

•    Screen fields with correct data(no errors in the input)

• Component hierarchy