j-Input is part of the jComponent library from Total.js. You can find more information about j-Input on componentator.com or GitHub.

j-Input is a UI component that supports various input types like string, email, number, phone number, checkbox, zip, password, date, time picker, and much more. It is optimized for usage in a wide range of applications with many features packaged in a single component. It is difficult to cover all the capabilities that j-Input provides in one blog post, so I will divide it into two parts. In first I will write about simpler usage and in the next one I will write about j-Input types where we will use j-Input in combination with other components.

Please consider it as a demonstration of a few important capabilities from my point of view and I hope that after reading it you will be able to use this component in your specific cases.

How to use j-Input

As the first step, you have to know how to use the jComponent library. I wrote about it in my previous blog, so for more information please read this blog post.

As I said before, j-Input is very versatile and can handle various types of inputs, so I will take some most interesting types and we will go through them one by one.

States of j-Input

Invalid
j-Input can occur in an invalid state, when the value assigned to a particular input does not meet the input requirements (e.g. value in input is not defined type, required input is empty …). When this happens input will be displayed with a red border and class ui-invalid-input will be added to the HTML element ui-component.

Binded
If a value is bound to the path assigned to input, class ui-input-binded will be added to the HTML element ui-component.

Focused — Touched — Modified
You can also catch if the input is focused (focus on input), was touched (input was focused before), or modified (value in input was changed by the user). This will be manifested by adding classes ui-input-focused, ui-touched, or ui-modified to the HTML element ui-component.

String type

The most commonly used input is for string values.

Example of j-Input for string values:

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="" default="">Test</ui-component>
</ui-plugin>

In the element ui-component we have four attributes (name, path, config, default), for more information about them please read this blog post.

If we want to have j-Input for string values, we don't have to declare it in configuration, because it is the default value for type. For this example, I will use as a path for our inputs path common.test.

Rendering of j-Input declared like this:

After writing some value to our input, this value will be set to our path right away.

If you remove text from an input like this, value in common.test will be an empty string.

Email type

j-Input for type email will validate the value typed into the input as email. So if you type value without @ and extension, input will be validated as invalid.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:email" default="">Test</ui-component>
</ui-plugin>

Rendered j-Input with type email with validation:

In reality, has j-Input in an invalid state whole red border, the problem is in the recorded gif.

Number type

j-Input for type number will validate the value typed into the input as a number. If the value typed to this input will contain letters, the value will be removed. In config, you can define min and max values and if the typed value is less than the defined min value, it will be automatically changed to min value and opposite, if the typed value is greater than the defined max value, it will be automatically changed to max value.

There are two types for type number input (number and number2), which work basically the same with one difference. If you use a type number and you will leave this input empty, it will automatically set the value to zero (0). If you use a type number2 and leave this input empty, the value will be automatically set to null.

Example of j-Input with type number:

Phone number type

j-Input for type phone number will validate the value typed into the input as a phone number. The phone number to this input can be with or without the country calling code.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:phone" default="">Test</ui-component>
</ui-plugin>

Example of j-Input with type phone number:

In reality, has j-Input in an invalid state whole red border, the problem is in the recorded gif.

Password type

j-Input for type password will validate value typed into input as string but value will be masked with stars. Also in input with type password is button to change state between visible and masked password.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:password" default="">Test</ui-component>
</ui-plugin>

Example of j-Input with type password:

Checkbox type

j-Input for type checkbox will work as a basic checkbox. To defined path will be saved value only as true or false based on whether the user will check or uncheck this input.

<ui-plugin path="common">
  <ui-component name="input" path="?.test" config="type:checkbox" default="">Test</ui-component>
</ui-plugin>

Example of j-Input with type checkbox:

Video tutorial