Let's build our first registration form using free components. With password confirm and validation.
How to create a sign up form?
This blog post describes how to create a sign up form with help of jComponent library and existing components on Componentator. So let's start:
First of all, we must somewhere store the data. So we'll declare variable called
form as object. This object will hold information like
BTW this step is not necessary because jComponent can handle it - create the object
Starting from the scratch
Components have own CDN. Just to make it clear. All our components from componentator.com have CDN, so we don't need to download the components locally. This is the one of the many powerful jComponent weapons. Read more about components on CDN.
We will use radio button for gender selection. This is a simple component. So our first code should look like this:
Every component has own configuration. Make sure you always read the configuration. The component supports
required argument. So we'll turn it on and we'll disable inline mode.
How simple is that?
required argument is very important for validation component.
Email, password, age
Next component is versatile input. Don't be scared of many configuration options. First of all is an email input:
Let's use some options from configuration:
Age is almost the same, just
type is changed from
number. The component supports auto-validation, so we will use it.
Password is a little tricky because we want
confirmation email form.
And password confirmation:
Magic. No, seriously. This component is like magic. Oh, and we'll use click
The problem is that passwords can be different. For cases like this there is
if condition. Okay, it's a lie. Validation works. But I want to show you
if option and how powerful it is.
and the function:
Sneak a peek - Advanced usage
Password confirmation can be confusing for slower users. So how about validating password confirm only after change? It's simple. Components have special configuration. Especially
We broke error message. I'm sure it's because
INVALID is called before the component validation. So we'll add a small delay.