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.
We will use radio button for gender selection. This is a simple component. So our first code should look like this:
<div data---="radiobutton__form.gender__items:Male|0,Female|1,Other|2">Sex:</div>
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.
<div data---="radiobutton__form.gender__required:1;inline:0;items:Male|0,Female|1,Other|2">Sex:</div>
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:
<div data---="input__form.email__type:email;required:1">Email</div>
Let's use some options from configuration:
<div data---="input__form.email__type:email;required:1;placeholder:email@example.com;ricon:envelope">Email</div>
Age
Age is almost the same, just type is changed from email to number. The component supports auto-validation, so we will use it.
<div data---="input__form.age__type:number;required:1;minvalue:5;maxvalue:120;error:Are you sure about your age?">Age</div>
Password
Password is a little tricky because we want confirmation email form.
<div data---="input__form.password__type:password;required:1;minlength:6;error:Minimum password length is 6 characters">Password</div>
And password confirmation:
<div data---="input__form.passwordconfirm__type:password;required:1;error:Passwords does not match">Password again</div>
Javascript
Here we go! Finally some javascript. We need just a small WATCHer for form.passwordconfirm.
WATCH('form.passwordconfirm', function(path, value, type) {
if (type && value !== form.password)
INVALID('form.passwordconfirm');
});
Validation
Magic. No, seriously. This component is like magic. Oh, and we'll use click data-bind:
<div data---="validation__form">
<button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
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.
<div data---="validation__form__if:value && value.password === value.passwordconfirm">
<button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
and the function:
function submit() {
console.log('Submit form:', form);
}
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
<div data---="input__form.passwordconfirm__type:password;required:1;error:Passwords does not match;$binding:2">Password again</div>
We broke error message. I'm sure it's because INVALID is called before the component validation. So we'll add a small delay.
WATCH('form.passwordconfirm', function(path, value, type) {
if (type && value !== form.password) {
setTimeout(function(){
INVALID('form.passwordconfirm');
}, 10);
}
});
Full source-code
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="all,follow" />
<link href="https://cdn.componentator.com/spa.min@18.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@18.js"></script>
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-3">
<div class="m" data---="radiobutton__form.sex__required:1;inline:0;items:Male|0,Female|1,Other|2">Sex:</div>
<div class="row">
<div class="col-md-8">
<div class="m" data---="input__form.email__type:email;required:1;placeholder:email@example.com;ricon:envelope">Email</div>
</div>
<div class="col-md-4">
<div class="m" data---="input__form.age__type:number;required:1;minvalue:5;maxvalue:120;error:Are you sure about it?">Age</div>
</div>
</div>
<div class="m" data---="input__form.password__type:password;required:1;minlength:6;error:Minimum password length is 6 characters">Password</div>
<div class="m" data---="input__form.passwordconfirm__type:password;required:1;error:Passwords does not match;$binding:2">Password again</div>
<div data---="validation__form__if:value && value.password === value.passwordconfirm">
<button name="submit" disabled="disabled" data-bind="null__click:submit">SUBMIT FORM</button>
</div>
</div>
</div>
</div>
<script>
var form = {};
function submit() {
console.log('Submit:', form);
}
WATCH('form.passwordconfirm', function(path, value, type) {
if (type && value !== form.password) {
setTimeout(function(){
INVALID('form.passwordconfirm');
}, 10);
}
});
</script>
</body>
</html>
