Base Client Side Library providing Javascript Validation Tools & Infrastructure

Development
1

We are in need of custom client side validation without having to implement serverside checks via the HTML form entry forms.

Looking through the different JS files, its not clear whether there is a core validation library that is being used. If none is used, I am wondering if JQuery Validation library (https://jqueryvalidation.org/) can be provided as core to simplify, and consolidate validation checks across different modules, especially as there is a push to richer client side clients.

Thoughts and advice are welcome

2

It looks like it’s currently possible to define your own JavaScript functions for validation, but I’m not sure if HTML Form Entry uses a library for client-side validation (I haven’t looked).

AMPATH is doing something cool for form entry with Angular.

Maybe we can talk about this on the ‘Enhancing to Platform’ dev call?

1 Like
3

The examples are not so good because validation errors are hardcoded in english.

1 Like
4

The current approach I have setup is as follows:

  1. Add the JQuery Validation plugin to my JS folder and load it through the webApplicationContext.xml as below
<bean class="org.openmrs.ui.framework.resource.Resource">
<property name="category" value="js" />
<property name="providerName" value="${project.parent.artifactId}" />
<property name="resourcePath" value="js/jquery.validate.min.js" />
<property name="priority" value="-195" />
</bean>
  1. In the HTML forms, ensure that the forms have an id for the obs tag - currently I am using the concept for the tag as the id to keep things simple - the ugphone class is my validation rule
<obs conceptId="90278" size="12" class="ugphone" id="90278"/>
  1. In the HTML form at the top, I have the following code to get the form validation working, thanks @pascal for the tips
/* add JQuery validator classes and rules */
jq("#90278 input").addClass("ugphone");
/* add the validator on the beforeSubmit */
beforeSubmit.push(function() {
  jq("#htmlform").validate();
  return jq("#htmlform").valid();
});