JavaScript Program to Create Registration Form with Validation
Write a JavaScript program to create registration form with validation
Source Code
<html>
<head>
<title>Registration form with validation</title>
<style>
input[type="text"],input[type="password"], select {
border: 1px solid red;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
form {
background-color: #f1f1f1;
width: 70%;
padding: 20px;
}
input[type="submit"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: green;
color: white;
font-size: 14;
}
input[type="reset"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: red;
color: white;
font-size: 14;
}
</style>
<script>
function input(e) {
e.style.backgroundColor="yellow";
}
function reset1(e) {
e.style.backgroundColor="white";
}
function fullName(name)
{
var n = name.value
var re = /^[a-zA-Z]+$/
if(n.match(re)==null)
{
alert('Only alphabets are allowed')
name.value=n.substring(0, n.length-1)
}
else
{
var f = document.getElementById("fname").value;
var m = document.getElementById("mname").value;
var l = document.getElementById("lname").value;
document.getElementById("sname").value = f + " " + m + " " + l;
}
}
function checkValidEmail(email)
{
var e = email.value
var re = /^([a-zA-Z0-9_\.]+)@([a-zA-Z0-9_\.]+)\.([a-z]+)$/
if(e.match(re)==null)
{
alert('Enter valid mail')
}
}
</script>
</head>
<body>
<center>
<form action="#" method="post">
<h1>Registration Form</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="fname" placeholder="Enter first name" onclick="input(this)" onblur="reset1(this)" oninput="fullName(this)"/></td>
<td><span id="msg1" hidden>Alphabets allowed only</span></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="mname" placeholder="Enter middle name" onclick="input(this)" onblur="reset1(this)" oninput="fullName(this)"/></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="lname" placeholder="Enter last name" onclick="input(this)" onblur="reset1(this)" oninput="fullName(this)"/></td>
</tr>
<tr>
<td>Full Name</td>
<td><input type="text" id="sname" disabled/></td>
</tr>
<tr>
<td>Date of Birth</td>
<td>
<select name="date">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select name="month">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select name="year">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<input type="radio" name="gender" value="Male">Male</input>
<input type="radio" name="gender" value="Female">Female</input>
</td>
</tr>
<tr>
<td>Contry</td>
<td>
<select name="contry">
<option selected>India</option>
<option>US</option>
<option>UK</option>
</select>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" name="email" onblur="checkValidEmail(this)" />
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<td>Comfirm Password</td>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit"/>
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output
