HTML
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="Custom.css">
</head>
<body>
<h1 class="heading">Our Financial Status</h1>
<table class="frm">
<tr>
<td>
First Name
</td>
<td>
<input type="text" placeholder="First Name" id="txtFirstName">
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" placeholder="Last Name" id="txtLastName">
</td>
</tr>
<tr>
<td>
Email Id
</td>
<td>
<input type="text" placeholder="Email" id="txtEmail">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" placeholder="Password" id="txtPassword">
</td>
</tr>
<tr>
<td>
Mobile No
</td>
<td>
<input type="text" placeholder="Mobile" id="txtMobileNo">
</td>
</tr>
<tr>
<td>
Pan Card No
</td>
<td>
<input type="text" placeholder="PanCard" id="txtPancard">
</td>
</tr>
<tr>
<td>
Aadhar Card No
</td>
<td>
<input type="text" placeholder="Aadhar Card" id="txtAadharCard">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" id="btnSubmit" class="button">
</td>
</tr>
<table>
<script src="Registraion.js"></script>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="Custom.css">
</head>
<body>
<h1 class="heading">Our Financial Status</h1>
<table class="frm">
<tr>
<td>
First Name
</td>
<td>
<input type="text" placeholder="First Name" id="txtFirstName">
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<input type="text" placeholder="Last Name" id="txtLastName">
</td>
</tr>
<tr>
<td>
Email Id
</td>
<td>
<input type="text" placeholder="Email" id="txtEmail">
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input type="password" placeholder="Password" id="txtPassword">
</td>
</tr>
<tr>
<td>
Mobile No
</td>
<td>
<input type="text" placeholder="Mobile" id="txtMobileNo">
</td>
</tr>
<tr>
<td>
Pan Card No
</td>
<td>
<input type="text" placeholder="PanCard" id="txtPancard">
</td>
</tr>
<tr>
<td>
Aadhar Card No
</td>
<td>
<input type="text" placeholder="Aadhar Card" id="txtAadharCard">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit" id="btnSubmit" class="button">
</td>
</tr>
<table>
<script src="Registraion.js"></script>
</body>
</html>
----------------------------------------------------------------------------------------------------
CSS
------
body {
font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #2d4259;
}
.heading
{
width: 270px;
line-height: 43px;
margin: 50px auto 20px;
font-size: 19px;
font-weight: 500;
color: white;
color: rgba(white, .95);
text-align: center;
text-shadow: 0 1px rgba(black, .3);
background: #d7604b;
border-radius: 3px;
}
.frm{
margin: 0 auto;
width: 375px;
padding: 20px;
background: #f4f4f4;
border-radius: 3px;
}
.input{
display: block;
width: auto;
height: 50px;
margin-top: 2px;
font-weight: 500;
background: none;
border: 0;
border-bottom: 1px solid #d8d8d8;
}
.label {
float: left;
width: 50%;
line-height: 32px;
color: white;
text-align: center;
cursor: pointer;
}
.button {
display: block;
width: 100%;
height: 42px;
margin-top: 25px;
font-size: 16px;
font-weight: bold;
color: #494d59;
text-align: center;
text-shadow: 0 1px rgba(white, .5);
background: #fcfcfc;
border: 1px solid;
border-color: #d8d8d8 #d1d1d1 #c3c3c3;
border-radius: 2px;
cursor: pointer;
}
---------------------------------------------------------------------------------------------------------------
Java Script
----------------------
function dataValidation()
{
var firstName=document.getElementById("txtFirstName");
var lastName=document.getElementById("txtLastName");
var emailID=document.getElementById("txtEmail");
var passward=document.getElementById("txtPassword")
var mobileNo=document.getElementById("txtMobileNo");
var panCard=document.getElementById("txtPanCard");
var aadharCard=document.getElementById("txtAadharCard");
var btnSubmit=document.getElementById("btnSubmit");
btnSubmit.addEventListener("click",UserRegistration);
firstName.addEventListener("keypress",alphabet);
lastName.addEventListener("keypress",alphabet);
emailID.addEventListener("keypress",alphanumeric);
passward.addEventListener("keypress",alphanumeric);
mobileNo.addEventListener("keypress",numeric);
panCard.addEventListener("keypress",alphanumeric);
aadharCard.addEventListener("keypress",numeric);
}
function UserRegistration()
{
console.log(this);
}
function alphabet(evnt)
{
console.log(this);
console.log(evnt);
var dataLength = this.value.length;
console.log(dataLength);
if((evnt.keyCode>=65 && evnt.keyCode<=90) ||
(evnt.keyCode>=97 && evnt.keyCode<=122)){
}
else{
alert("only alphabet[a-z or A-Z]");
evnt.preventDefault();
}
}
function numeric(evnt)
{
var dataLength = this.value.length;
if((evnt.keyCode >=48 && evnt.keyCode<=57)&&(this.value.length !=10))
{
}
else
{
alert("only number and not than 10 digits");
evnt.preventDefault();
}
}
function alphanumeric(evnt)
{
if(((evnt.keyCode >=65 && evnt.keyCode <=90) ||
(evnt.keyCode >=48 && evnt.keyCodeode<=57)
&&(thi.value.length !=10)))
{
}
else{
alert("It allow not capital letter, [0-9 ] and not greather than 10 character");
evnt.preventDefault();
}
}
function alphnumericWithspecialcharacters(evnt)
{
if(((
(evnt.keyCode>=65 && evnt.keyCode<=90) ||
(evnt.keyCode>=97 && evnt.keyCode<=122)||
(evnt.keyCode >=48 && evnt.keyCodeode<=57)&&
(this.value.length<=10 || this.value.length>=20)
)))
{
}
else{
alert("It allow not [A-Z, a-z,0-9 ] and not <10 || >20 character");
evnt.preventDefault();
}
//Note: I want add following Special Characters in this function.
// Ascii Value
// 45 -
// 46 .
// 64 @
// 95 _
}
dataValidation();
Please give your comment
