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.
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.
To make an input required, set the required option on the component to a boolean value. - e.g., 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.
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."
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.
If no value is entered then the following message will be shown.
If the value entered is not the proper length then you get another message.
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.
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.
See the Pen Oracle JET - Form (checkout)