<!DOCTYPE html>
<html>
<head>
<!--
Write Javascript function that validates the following form fields using regular
expression, (First Name, Last Name, Username, Password, Email, Phone ) Phone field contain only numbers 
    -->
<title>Q2</title>
</head>
<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>         
<form name="RegForm" action="" onsubmit="return validate()" method="post"> 
     
    <p>First Name: <input type="text" size=65 name="FirstName"> </p><br>     
    <p>Last Name: <input type="text" size=65 name="LastName"> </p><br> 
    <p>User Name: <input type="text" size=65 name="UserName"> </p><br> 
    <p> Address: <input type="text" size=65 name="Address">  </p><br>
    <p>E-mail Address: <input type="text" size=65 name="EMail">  </p><br>
     <p>Password: <input type="text" size=65 name="Password"> </p><br>
    <p>Telephone: <input type="number" size=65 name="Telephone"> </p><br> 
     
    <p><input type="submit" value="send" name="Submit">     
        <input type="reset" value="Reset" name="Reset"> 
    </p>
</body>
</html>
<script>
function validate()                                   
{
    var fname = document.forms["RegForm"]["FirstName"]; 
    var lname = document.forms["RegForm"]["LastName"];
    var uname = document.forms["RegForm"]["UserName"];           
    var email = document.forms["RegForm"]["EMail"];   
    var phone = document.forms["RegForm"]["Telephone"]; 
    var password = document.forms["RegForm"]["Password"]; 
    var address = document.forms["RegForm"]["Address"]; 
 
    if (fname.value == "")                                 
    {
        window.alert("Please enter your first name.");
        fname.focus();
        return false;
    }
    if (lname.value == "")                                 
    {
        window.alert("Please enter your last name.");
        lname.focus();
        return false;
    }
    if (uname.value == "")                                 
    {
        window.alert("Please enter your user name.");
        uname.focus();
        return false;
    }
 
    if (address.value == "")                             
    {
        window.alert("Please enter your address.");
        name.focus();
        return false;
    }
     
    if (email.value == "")                                 
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
 
    if (email.value.indexOf("@", 0) < 0)               
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
 
    if (email.value.indexOf(".", 0) < 0)               
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
 
    if (phone.value == "")                         
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }
    if (password.value == "")                       
    {
        window.alert("Please enter your password");
        password.focus();
        return false;
    }
 
 
    return true;
}</script>
<style type="text/css">
validate {                                       
    margin-left: 70px;
    font-weight: bold ;
    float: left;
    clear: left;
    width: 100px;
    text-align: left;
    margin-right: 10px;
    font-family:sans-serif,bold, Arial, Helvetica;
    font-size:14px;
}
 
div { 
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
 
form {                                       
    margin: 0 auto;
    width: 600px;
}
</style>