Skip to Content
Author's profile photo Laxmana Appana

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

Initial UI.PNG

  • Created default configuration with above three fields.

UI Configuration.PNG

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

                                                                                                            htm img.PNG

  • 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.

Field Contents Length Validation.PNG

“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.

Field Contents numeric Validation.PNG

  • 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.

Finding the UI fields in the configuration.PNG

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.

OnBlur Event.PNG

Calling the Field Events.PNG

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.

Iterator Method.PNG

Script Attachment.PNG

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

Iterator addition in htm.PNG

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

UI field contents length validation Popup.PNG

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

UI Number validation Popup.PNG

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

No Popup with right Values.PNG

  • Component hierarchy


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Faisal PC
      Faisal PC

      Hi Laxmana,

      Nice blog. Actually I was always thinking that SAP should do more of client side validations rather than going to back end and checking each time. Javascript is a good option. However, if you see the way the error messages are shown, they are as popups and usual CRM error messages come in the top right side with red color. So for users the other one will be more familiar I think. Is there any way we can do that way of message display with javascript?.



      Author's profile photo Laxmana Appana
      Laxmana Appana
      Blog Post Author

      Thanks Faisal.

      I will try your suggestion and update accordingly.


      Laxmana Appana