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