Oracle JET - Forms and validators

July 18, 2016    Oracle JET Forms Validators Blog

Creating an engaging experience for users when they visit your site is always important, especially if you want them to provide information about themselves. That’s where creating a great form comes into play. In this post, we’ll take a quick look at how you can create a form, add visual cues to inputs and provide helpful hints on the type of information that is needed. At the end, we’ll tie it all together with some validation so that your form is complete.

Let's start by creating a simple form with a couple of inputs like name, address, phone and email. At the bottom of the form we have a submit button that will simulate sending the information to our application.


Form layout

For this example, let’s use the “stacked” form layout from the Oracle JET Cookbook Form Layout - Stacked. This layout positions the label directly on top of each input, which works nicely on desktop and mobile.

Stacked Form Layout

Form details

To make an input required, set the required option on the component to a boolean value. - e.g., required: true

<input id="cardnumber"
   data-bind = "ojComponent:{
   component: 'ojInputText',
   value: cardnumber,
   required: true 
   }">

With the required option set, JET applies styling denoting a required value. Next, let's set the placeholder option so that users know what format the information should resemble.

<input id="cardnumber"
   data-bind = "ojComponent:{
   component: 'ojInputText',
   value: cardnumber,
   required: true,
   placeholder: 'xxxx-xxxx-xxxx-xxxxx' 
   }">

If you want to add visual help text, set the title attribute on the input element, e.g. title="Enter a valid credit card no."

 <input id="cardnumber" title="Enter a valid credit card no."
        data-bind="ojComponent:{
        component: 'ojInputText', 
        value: cardnumber,
        placeholder:'xxxx-xxxx-xxxx-xxxxx'
        required: true                            
  }">

Stacked Form Layout

Validator

Now we have input fields that provide users with hints on what type of information we are expecting, so let's validate the information that is entered. For this, we can use the validator option on the input component. Validators are configured as a JSON object. For our example we will use the regExp validator type and set specific options for the pattern we require. If there is an exception to this validation, we specify the error message in the messageDetail attribute.

<input id="cardnumber" title="Enter a valid credit card no."
    data-bind="ojComponent:{
    component: 'ojInputText',
    rootAttributes: {
       style:'max-width:100%'
    }, 
    value: cardnumber,
    invalidComponentTracker: tracker,
    placeholder:'xxxx-xxxx-xxxx-xxxxx',
    validators: [{
     type: 'regExp', 
     options: {
     pattern: '[0-9]{10,}', 
     messageDetail: 'You must enter a valid card number, i.e. 10 digits'}}],
     required: true                            
}">

If no value is entered then the following message will be shown.

Oracle JET - Input validation

If the value entered is not the proper length then you get another message.

Oracle JET - Input validation regExp


At this point, the input boxes have labels and some validation, so you may be thinking that if you press submit the validation rules will be triggered by the application - not so. We still need to do a little more work.

Component Validation

According to the cookbook, the invalidComponentTracker option for input components can be used by simply creating a variable to track exceptions App Level Validation: Complete Example.


Code

See the Pen Oracle JET - Form (checkout)


blog comments powered by Disqus