Forms Using Jade: Node.js

Forms are one of the important components of web application. You need registration form, login form, edit form, status update form etc ..

forms-in-Jade-nodejs

In this video tutorial we shall see how to write the form in Jade, and how to use Twitter Bootstrap to design the form (we just show you how to add the id or class tags and not actual bootstrap implementation – but if you need any help, you can always ask us in the comment section below).

Related Read:
Basics of Jade – Template Engine: Node.js
Loops and Conditions In Jade: Node.js
Mixins in Jade: Node.js

Route To Render Form
app.js

1
2
3
app.get('/edit', function(req, res){
 res.render('edit-form');
});

We define a route /edit and once someone visits this route, we render our edit-form.jade template file.

Form tags in Jade
edit-form.jade

1
2
3
4
5
6
7
8
9
10
form(method="POST", action="/user")
 input(type="hidden", name="_method", value="PUT")
 p Name
  input(type="text", name="name")
 p Email
  input(type="email", name="email")
 p Age
  input(type="number", name="age")
 p
  input(type="submit")

Here we indent input tags inside paragraph tags, which is a child of form. We separate form attributes using comma.

Forms Using Jade: Node.js


[youtube https://www.youtube.com/watch?v=1RC9re_llx0]

YouTube Link: https://www.youtube.com/watch?v=1RC9re_llx0 [Watch the Video In Full Screen.]



Form tags with Jade and Bootstrap
edit-form.jade

1
  input#btn(type="submit")

If you want to use bootstrap along with your jade template files, make sure to include bootstrap.min.css and bootstrap.min.js and jquery.min.js into your file, by opening layout.jade present inside your view folder. Now add the id or class names along with the html tags, this should render you bootstrap enabled functionality and styling.

Form output source code
view-source:localhost:3000/edit

1
2
3
4
5
6
7
<form method="POST" action="/user">
 <input type="hidden" name="_method" value="PUT"/>
 <p>Name<input type="text" name="name"/></p>
 <p>Email<input type="email" name="email"/></p>
 <p>Age<input type="number" name="age"/></p>
 <p><input type="submit"/></p>
</form>

You can observe the nesting of elements and their relationship – child and parent.

Fetch Data From MongoDB: Node.js

What’s the use of the data in database, if we can’t fetch it and display on a web page! Today’s video tutorial concentrates on fetching data out of our mongoDB collection and displaying it on the web page.

fetch-data-from-mongoDB-nodejs

Related Read: Save data To MongoDB: Node.js

Route to display registered users
app.js

1
2
3
4
5
6
app.get('/view', function(req, res){
user.find({}, function(err, docs){
if(err) res.json(err);
else    res.render('index', {users: docs});
});
});

Once the user visits /view route, she will be presented with all the registered users information. Inside /view route, we fetch all the user information by using mongoDB’s find() method. find() takes 2 parameters – first parameter is an object with condition, second parameter is a callback method. If we pass in empty object as first parameter, it means, fetch all the data – similar to SELECT * in sql.

If find() could successfully fetch the data out of mongoDB collection, it renders index.jade file and passes an object to it – which contains information of all the fetched users.

Template To Display User Information
view/index.jade

1
2
3
ul
each user in users
 li #{user.name}: #{user.age}: #{user._id}

Here we loop through users object, fetch individual user information, and display as a list item.

Fetch Data From MongoDB: Node.js


[youtube https://www.youtube.com/watch?v=U0zK-Nb2vn8]

YouTube Link: https://www.youtube.com/watch?v=U0zK-Nb2vn8 [Watch the Video In Full Screen.]



Note: Since email address has been made as _id, each registered user will have a unique email address associated with her.

Fetch individual user information
app.js

1
2
3
4
5
6
app.get('/view', function(req, res){
user.find({_id: '[email protected]'}, function(err, docs){
if(err) res.json(err);
else    res.render('index', {users: docs});
});
});

Observe the find() methods first parameter. Now we are passing _id to it, which means, it has to find and retrieve only the information related to the user with that _id.

Full Code To Insert And Fetch Data into/from MongoDB
app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var express = require('express');
var http = require('http');
var path = require('path');
var mongoose = require('mongoose');
 
var app = express();
 
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
 
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
 
mongoose.connect('mongodb://localhost/Company');
 
var Schema = new mongoose.Schema({
_id    : String,
name: String,
age   : Number
});
 
var user = mongoose.model('emp', Schema);
 
app.get('/view', function(req, res){
user.find({}, function(err, docs){
if(err) res.json(err);
else    res.render('index', {users: docs});
});
});
 
app.post('/new', function(req, res){
new user({
_id    : req.body.email,
name: req.body.name,
age   : req.body.age
}).save(function(err, doc){
if(err) res.json(err);
else    res.redirect('/view');
});
});
 
var server = http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

To make this work, go to Save data To MongoDB: Node.js tutorial page and copy the index.html page code and create one for your project and put it inside public directory. Now you can directly access root(html form), enter user information and submit, which redirects to /view route, wherein you get the information of all the registered users.

Note: Make sure MongoDB server is running and turned on, when you start Node.js server and access your application from web browser.

Related Read: MongoDB – Getting Started Guide

pattern and title Attribute of Form Field: HTML5

Today lets see how we can make use of pattern attribute to validate the user input data and use title attribute to hint the user for right inputs.

pattern-title-attribute-html5-regular-expression

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< !DOCTYPE HTML>
<html>
<head>
<title>pattern and title attribute: HTML5</title>
<link href="myStyle.css" rel="Stylesheet"/>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<label for="name">Name: </label>
 <input id="name" type="text" pattern="^[a-zA-Z]+$" title="Example: Satish"/><br />
 
<label for="age">Age: </label>
 <input id="age" type="text" pattern="^[0-9]{2}$" title="Example: 25" /><br />
 
 <input type="submit" value="Done"/>
</form>
 
</body>
</html>

Here in the first input field, we’re restricting the input to only lower case and upper case alphabets. To the second input field, we’re restricting it to only 2 digits from 0 to 9.

CSS file
myStyle.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
label{
width: 50px;
    float:left;
}
 
input{
width: 200px;
}
 
form {
padding: 5px;
background-color: ivory;
width: 300px;
height: auto;
border: 2px dotted black;
}

CSS styling to align the input fields and the labels, with background color to the form, which has a 2px black dotted border.

pattern and title Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=TKLF0Aydcv4]

YouTube Link: https://www.youtube.com/watch?v=TKLF0Aydcv4 [Watch the Video In Full Screen.]



Note: ^ symbol specifies the beginning and the $ symbol specifies the end of the input value.

You can share any simple/small to complex/big regular expression knowledge in the comment section below. Your time and effort is highly appreciated. Your knowledge and inputs will surely be helpful to many people around the world. Comment section is all yours :-)

autocomplete Attribute of Form Field: HTML5

Today lets see how autocomplete attribute of HTML5 works.

autocomplete-html5-form

Here we take 3 input fields and individually enable and disable the autocomplete feature by specifying it’s values: ON and OFF.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< !DOCTYPE HTML>
<html>
<head>
<title>Form, autocomplete: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
First Name: <input type="text" name="fname" autocomplete="on"/> <br /><br />
Second Name: <input type="text" name="lname" autocomplete="on"/><br />
Email: <input type="text" name="email" autocomplete="off"/><br />
<input type="submit"/>
</form>
 
</body>
</html>

Here we have 3 input fields with autocomplete turned ON for first 2 and turned off for the last.

autocomplete Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=XNjUfwDmHGc]

YouTube Link: https://www.youtube.com/watch?v=XNjUfwDmHGc [Watch the Video In Full Screen.]



Note:
To make autocomplete feature to work
1. Turn ON the autocomplete feature for form, in your browser.
2. Make sure to name all your input fields. Without naming, autocomplete feature may not work.
3. If not specified, tags will inherit autocomplete feature from its parent tag. If not turned OFF, browser will have autocomplete turned ON by default, once it is enabled in browser settings.

autocomplete=”off”
Turn off autocomplete to password fields, debit card, credit card, account number fields.

autofocus Attribute of Form Field: HTML5

Quick video to illustrate autofocus attribute of HTML5 form fields.

autofocus-html5-form

Here we take 3 input fields, and one field is set with autofocus attribute.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< !DOCTYPE HTML>
<html>
<head>
<title>Form, Autofocus: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" />
<input type="text" />
<input type="text" autofocus/>
<button>Done</button>
</form>
 
 
</body>
</html>

In above case, the third input field gets the autofocus.

autofocus Attribute of Form Field: HTML5


[youtube https://www.youtube.com/watch?v=E1L5-5ZhZaE]

YouTube Link: https://www.youtube.com/watch?v=E1L5-5ZhZaE [Watch the Video In Full Screen.]



Note: You can also apply autofocus to the buttons, so that user can directly hit OK or CANCEL by pressing Enter key of their keyboard! – whichever is most desired.