Componentator
Componentator

Reusable Web Components for everyone

How to create a sign up form?

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:

Variable

First of all, we must somewhere store the data. So we'll declare variable called form as object. This object will hold information like form.email:

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.

Radio button

We will use radio button for gender selection. This is a simple component. So our first code should look like this:

Configuration

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

Age is almost the same, just type is changed from email to number. The component supports auto-validation, so we will use it.

Password

Password is a little tricky because we want confirmation email form.

And password confirmation:

Javascript

Here we go! Finally some javascript. We need just a small WATCHer for form.passwordconfirm.

Validation

Magic. No, seriously. This component is like magic. Oh, and we'll use click data-bind:

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 $binding

We broke error message. I'm sure it's because INVALID is called before the component validation. So we'll add a small delay.

Full source-code