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
There are two thing we to keep in mind .The order of our checking matter. Ensure the check arrange in decreasing order of the number of keys that are pressed. Second some key combination result in our browser doing something .To avoid browser from doing its own thing, so we use Prevent Default() method.
ReplyDelete