index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.error{
color: red;
font-style: italic;
}
</style>
</head>
<body>
<button type='text' class="btn btn-primary" id="showbtn">Show/Hide Form</button>
<div class = "container">
<div class = "col-md-6 col-md-offset-3">
<div class = "panel panel-primary">
<div class = "panel-heading">
Registration
</div>
<div class = "panel-body">
<form id = "registration" action="http://127.0.0.1:7744/register">
<input type = "text" class = "form-control" name = "username" placeholder = "Username"/>
<br/>
<input type = "text" class = "form-control" name = "email" placeholder = "Email"/>
<br/>
<input type = "password" class = "form-control" name = "password" placeholder = "Password" id = "password"/>
<br/>
<input type = "password" class = "form-control" name = "confirm" placeholder = "Confirm Password"/>
<br/>
<input type = "text" class = "form-control" name = "fname" placeholder = "First Name"/>
<br/>
<input type = "text" class = "form-control" name = "lname" placeholder = "Last Name"/>
<br/>
<div class = "gender">
<label class="radio-inline"><input type="radio" value="male" name="gender" class = "form-contorl"/>Male</label>
<label class="radio-inline"><input type="radio" name="gender" value="female" class = "form-contorl"/>Female</label>
</div>
<br/>
<select class = "form-control" name = "city">
<option value="0" selected="" disabled="">--SELECT--</option>
<option>Delhi</option>
<option>Ghaziabad</option>
<option>Noida</option>
<option>Faridabad</option>
<option>GuruGram</option>
</select>
<br/>
<textarea class = "form-control" name = "address" placeholder="Address"></textarea>
<br/>
<button type = "submit" class = "btn btn-primary" >Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> $(document).ready(function () {
jQuery.validator.addMethod("noSpace", function (value, element) {
return value == '' || value.trim().length != 0;
}, "No space please and don't leave it empty");
jQuery.validator.addMethod("customEmail", function (value, element) {
return this.optional(element) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value);
}, "Please enter valid email address!");
$.validator.addMethod("alphanumeric", function (value, element) {
return this.optional(element) || /^\w+$/i.test(value);
}, "Letters, numbers, and underscores only please");
var $registrationForm = $('#registration');
if ($registrationForm.length) {
$registrationForm.validate({
rules: {
username: {
required: true,
alphanumeric: true
},
email: {
required: true,
customEmail: true
},
password: {
required: true
},
confirm: {
required: true,
equalTo: '#password'
},
fname: {
required: true,
noSpace: true
},
lname: {
required: true,
noSpace: true
},
gender: {
required: true
},
country: {
required: true
},
address: {
required: true
}
},
messages: {
username: {
required: 'Please enter username!'
},
email: {
required: 'Please enter email!',
email: 'Please enter valid email!'
},
password: {
required: 'Please enter password!'
},
confirm: {
required: 'Please enter confirm password!',
equalTo: 'Please enter same password!'
},
fname: {
required: 'Please enter first name!'
},
lname: {
required: 'Please enter last name!'
},
country: {
required: 'Please select country!'
},
address: {
required: 'Please enter address!'
}
},
errorPlacement: function (error, element) {
if (element.is(":radio")) {
error.appendTo(element.parents('.gender'));
}
else {
error.insertAfter(element);
}
}
});
}else{
alert("submitted");
}
$('#showbtn').click(function () {
$('.container').fadeToggle('slow');
});
});
</script>
</body>
</html>
index.js Server
var express = require('express');
var app = express();
var mysql = require('mysql');
var connection = mysql.createConnection({
host: '127.0.0.1',
user: 'root',
password: '',
database: 'node_form'
});
connection.connect();
app.get('/', function (req, res) {
res.sendFile(__dirname + "/" + "index.html");
})
app.get('/register', function (req, res) {
var fname = req.query.fname;
var lname = req.query.lname;
var username = req.query.username;
var gender = req.query.gender;
var email = req.query.email;
var city = req.query.city;
var password = req.query.password;
var address = req.query.address;
var confirm = req.query.confirm;
var check = "select * from registration where email = '" + email + "' or username = '" + username + "'";
connection.query(check, function (err, result) {
if (err) {
throw err;
} else if (result.length !== 0) {
console.log("user already exist");
}
else {
var user = {
fname: fname,
lname:lname,
username:username,
gender:gender,
email:email,
city:city,
password:password,
address:address
};
if (password !== confirm) {
console.log("password and confirm password not match")
} else {
connection.query('insert into registration set ?', user, function (err, rs) {
if (err) throw err;
console.log('Form submitted successfully');
res.sendFile(__dirname + "/" + "index.html");
})
}
}
})
})
var server = app.listen(7744, function () {
console.log("server started");
})
