Question

Create a Home Page:

Part 1

• Contain an image or logo about your website.

• Must contain three navigation links. Home link. Registration link. Animations link.

• Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab.

Create a Registration page:

• Registration Fields:

1) User Name - Input Text

2) Password - Input Password

3) Repeat Password - Input Password

4) First Name - Input Text

5) Last Name - Input Text

6) Address line 1 - Input Text

7) Address line 2 - Input Text

8) City - Input Text

9) State - Drop Down of Options

10) Zip Code - Input Text

11) Phone Number - Input Text

12) Email - Input Text

13) Gender - Radio buttons

14) Marital Status - Radio buttons

15) Date of Birth - Input Text, must have a calendar pop up (date picker)

16) Submit Button - Form submit button

17) Reset Button - Clears form fields to default settings (normally empty)

Create an Animation page:

• Use CSS3 animations to make an animation that matches your web site theme.

Part 2

• Add client side HTML5 and JavaScript form validation for user input

• Validation Rules for Registration Fields (do not change the input types from Project 1, these validation character lengths are going to be the database column sizes, so for radio/drop down options, just do not give the user a value under/over the limit):
1) User Name

a. Required Field

b. Max length 50 characters, minimum length 6 characters

2) Password

a. Required Field

b. Max length 50 characters, minimum length 8 characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 special character

3) Repeat Password

a. Required Field

b. Max length 50 characters, minimum length 8 characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 special character

d. Ensure password fields match

4) First Name

a. Required Field

b. Max length 50 characters

5) Last Name

a. Required Field

b. Max length 50 characters

6) Address line 1

a. Required Field

b. Max length 100 characters

7) Address line 2

a. Optional Field

b. Max length 100 characters

8) City

a. Required Field

b. Max length 50 characters

9) State

a. Required Field

b. Max length 52 characters

10) Zip Code

a. Required Field

b. Max length 10 characters, minimum length 5 digits

c. Use jQuery/JavaScript to dynamically adjust user input to match either xxxxx or xxxxx-xxxx format (this should be done either as the user is typing or after leaving the field)

11) Phone Number

a. Required Field

b. Max length 12 characters

c. Use jQuery/JavaScript to dynamically adjust user input to match xxx-xxx-xxxx (this should be done either as the user is typing or after leaving the field)
format

12) Email

a. Required Field

b. Email format, [email protected] format, where x is a placeholder for valid alphanumeric characters

13) Gender

a. Required Field

b. Max length 50 characters

14) Marital Status

a. Required Field

b. Max length 50 characters

15) Date of Birth

a. Required Field

b. MM/dd/yyyy format

16) Submit Button

a. Submits valid user data only

17) Reset Button

a. Resets all fields to default value (empty, for most fields)

----------------------------------------------------------------------------------------------------

• When validating user input with JavaScript. Check all user input fields.

o All valid user inputs are marked green with some icon or messaging indicating good
input.
o All invalid user inputs are marked red with some icon or messaging indicating bad input.

o Make sure all valid user data is submitted to the server

----------------------------------------------------------------------------------------------------

Answer 1

Part 1:

According to the step by step procedure, webpage is developed and the javascript which was developed while click on button reset which will clear all the data, here the javascript to code to better understanding how to use the function to clear the data:

function ClearFields() {

     document.getElementById("username").value = "";
     document.getElementById("password").value = "";
  
 document.getElementById("fname").value = ""; 
  
document.getElementById("lname").value = "";  
  
 document.getElementById("ads1").value = ""; 

document.getElementById("ads2").value = "";  
  
document.getElementById("city").value = "";  
  
document.getElementById("state").value = "";  
  
document.getElementById("zip").value = "";  
  
document.getElementById("phone").value = "";  
  
document.getElementById("email").value = "";  
  
document.getElementById("date").value = "";  
  
  
}

Now to design, the webpage more responsive that is make use of css and animation effect, here the css file which was defined and here the code for clear understanding:

body {
  font-family: Helvetica;
  margin: 0;
}
a {
  text-decoration: none;
  color: #000;
}
.site-header { 
  border-bottom: 1px solid #ccc;
  padding: .5em 1em;
}

.site-header::after {
  content: "";
  display: table;
  clear: both;
}

.site-identity {
  float: left;
}

.site-identity h1 {
  font-size: 1.5em;
  margin: .7em 0 .3em 0;
  display: inline-block;
}

.site-identity img {
  max-width: 55px;
  float: left;
  margin: 0 10px 0 0;
}

.site-navigation {
  float: right;
}

.site-navigation ul, li {
  margin: 0; 
  padding: 0;
}

.site-navigation li {
  display: inline-block;
  margin: 1.4em 1em 1em 1em;
}

.footer {
position: relative;
  text-align: center;
  bottom: 0;
  width: 100%;
  padding: 3px;
  height: 25px;
  background-color: #f5f5f5;
        }

#info{
                font-weight: bold;
                color:red;
        }
  form div {
          text-align: left;
          margin: 5px 3px;
          font-size: 22px;      
  }
  
  
  
  input[type="radio"] {
          margin: 4px 0px 20px -105px;
  }
  
  .gend {
          display: flex;
          margin-left: 64px;
  }

  
  .dgend {
                text-align: center;
    margin: -5px 56px 5px 4px;
  }
  
  input[type="date"] {
          font-size:16px;
          color:#252e387a;
  }
  
  input::placeholder {
          font-size:16px;
          color:#252e387a;
  }
  
  form {
          position:relative;
          width:365px;
          height:100%;
          margin:50px auto 100px;
          text-align:center;
          background:#eeeeef;
          padding:40px;
          -webkit-border-radius:40px 0 0 0;
          -moz-border-radius:40px 0 0 0;
                border-radius: 50px 7px 50px 7px;
                box-shadow: -9px -11px 0px 2px #eef1fb38, inset 10px 7px 0px 0px #a3a7b1f2;
         
  }
  
  h4 {
          font-family: 'Source Sans Pro', sans-serif;
          font-size:2em;
          font-weight:300;
          margin: -24px 13px 12px 12px;
          color:#000;
          text-shadow:1px 1px 0px white;
  }
  
  input {
          display:block;
          width:315px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
  }
  
  input:focus {
          background:#fafafa;
  }


  select {
          display:block;
          width:350px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
    background-color: #fff;
  }
  
  select:focus {
          background:#fafafa;
  }

 
  
  .button {
                position: relative;
    float: left;
    width: 145px;
    margin-top: 10px;
    background: #507492;
    color: #fff;
    font-weight: 400;
    text-shadow: 1px 1px 0px #2d7baf;
    box-shadow: -7px -6px 0px #9c9c9cc4;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    outline:none;
}
input {
    display: block;
    width: 315px;
    padding: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
    margin-bottom: 20px;
    color: #7f8c8d;
    font-weight: 600;
    font-size: 16px;
  }  
   
  .button:hover {
         background-color:#3a5e7bdb;;
         border-bottom-right-radius: 32%;
          border-bottom-left-radius: 32%;
  } 
  
   input [type="checkbox"] {
           width:10px;
   }
  
  .button {
  cursor: pointer;
  font-weight: bold;    
  }

Now add the above the javascript code with the help of script tag and css code with the help of style tag and final html page code here:

<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<style>
body {
  font-family: Helvetica;
  margin: 0;
}
a {
  text-decoration: none;
  color: #000;
}
.site-header { 
  border-bottom: 1px solid #ccc;
  padding: .5em 1em;
}

.site-header::after {
  content: "";
  display: table;
  clear: both;
}

.site-identity {
  float: left;
}

.site-identity h1 {
  font-size: 1.5em;
  margin: .7em 0 .3em 0;
  display: inline-block;
}

.site-identity img {
  max-width: 55px;
  float: left;
  margin: 0 10px 0 0;
}

.site-navigation {
  float: right;
}

.site-navigation ul, li {
  margin: 0; 
  padding: 0;
}

.site-navigation li {
  display: inline-block;
  margin: 1.4em 1em 1em 1em;
}

.footer {
position: relative;
  text-align: center;
  bottom: 0;
  width: 100%;
  padding: 3px;
  height: 25px;
  background-color: #f5f5f5;
        }

#info{
                font-weight: bold;
                color:red;
        }
  form div {
          text-align: left;
          margin: 5px 3px;
          font-size: 22px;      
  }
  
  
  
  input[type="radio"] {
          margin: 4px 0px 20px -105px;
  }
  
  .gend {
          display: flex;
          margin-left: 64px;
  }

  
  .dgend {
                text-align: center;
    margin: -5px 56px 5px 4px;
  }
  
  input[type="date"] {
          font-size:16px;
          color:#252e387a;
  }
  
  input::placeholder {
          font-size:16px;
          color:#252e387a;
  }
  
  form {
          position:relative;
          width:365px;
          height:100%;
          margin:50px auto 100px;
          text-align:center;
          background:#eeeeef;
          padding:40px;
          -webkit-border-radius:40px 0 0 0;
          -moz-border-radius:40px 0 0 0;
                border-radius: 50px 7px 50px 7px;
                box-shadow: -9px -11px 0px 2px #eef1fb38, inset 10px 7px 0px 0px #a3a7b1f2;
         
  }
  
  h4 {
          font-family: 'Source Sans Pro', sans-serif;
          font-size:2em;
          font-weight:300;
          margin: -24px 13px 12px 12px;
          color:#000;
          text-shadow:1px 1px 0px white;
  }
  
  input {
          display:block;
          width:315px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
  }
  
  input:focus {
          background:#fafafa;
  }


  select {
          display:block;
          width:350px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
    background-color: #fff;
  }
  
  select:focus {
          background:#fafafa;
  }

 
  
  .button {
                position: relative;
    float: left;
    width: 145px;
    margin-top: 10px;
    background: #507492;
    color: #fff;
    font-weight: 400;
    text-shadow: 1px 1px 0px #2d7baf;
    box-shadow: -7px -6px 0px #9c9c9cc4;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    outline:none;
}
input {
    display: block;
    width: 315px;
    padding: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
    margin-bottom: 20px;
    color: #7f8c8d;
    font-weight: 600;
    font-size: 16px;
  }  
   
  .button:hover {
         background-color:#3a5e7bdb;;
         border-bottom-right-radius: 32%;
          border-bottom-left-radius: 32%;
  } 
  
   input [type="checkbox"] {
           width:10px;
   }
  
  .button {
  cursor: pointer;
  font-weight: bold;    
  }

</style>
<script>
function ClearFields() {

     document.getElementById("username").value = "";
     document.getElementById("password").value = "";
  
 document.getElementById("fname").value = ""; 
  
document.getElementById("lname").value = "";  
  
 document.getElementById("ads1").value = ""; 

document.getElementById("ads2").value = "";  
  
document.getElementById("city").value = "";  
  
document.getElementById("state").value = "";  
  
document.getElementById("zip").value = "";  
  
document.getElementById("phone").value = "";  
  
document.getElementById("email").value = "";  
  
document.getElementById("date").value = "";  
  
  
}

</script>

</head>
<body>
<header class="site-header">
  <div class="site-identity">
    <a href="#"><img src="https://images.unsplash.com/photo-1542353436-312f0e1f67ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=554&q=80" style="background-color: red;"  /></a>
    <h1><a href="#">My Website</a></h1>
  </div>  
  <nav class="site-navigation">
    <ul class="nav">
      <li><a href="#">Home</a></li> 
      <li><a href="#">Registration</a></li> 
      <li><a href="#">Annimation</a></li> 
    </ul>
  </nav>
</header>

<form action="#" method="post" name="main_form">
                        <h4>Registration info</h4>
                                <div><label for="username">Username</label></div>
                        <input name="username" id="username" type="text" placeholder="Enter Username" maxlength="50" pattern="[A-Za-z]{1,50}">
                                        <div><label for="userLastname">Password</label></div>
                        <input name="password" id="password" type="password" placeholder="Enter Password" pattern="[A-Za-z]{1,50}" maxlength="50">
                                
                        <div><label for="firstname">First Name</label></div>
                        <input name="fname" id="fname" type="text" placeholder="Enter First Name" maxlength="50" pattern="[A-Za-z]{1,50}">  
  
  
                        <div><label for="lastname">Last Name</label></div>
                        <input name="lname" id="lname" type="text" placeholder="Enter Last Name" maxlength="50" pattern="[A-Za-z]{1,50}">  
  
                        <div><label for="ad1">Address Line 1</label></div>
                        <input name="ads" id="ads1" type="text" placeholder="Enter the  Address" maxlength="50" pattern="[A-Za-z]{1,50}">
  
                        <div><label for="ad2">Address Line 2</label></div>
                        <input name="adss" id="ads2" type="text" placeholder="Enter the  Address" maxlength="50" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="ad1">City</label></div>
                        <input name="city" id="city" type="text" placeholder="Enter the  City" maxlength="50" pattern="[A-Za-z]{1,50}">
  
                        <div><label for="ad1">State</label></div>  
  <select name="state">
<option selected value="">State...</option>
<option value="ZZ">None</option>
<option value="">-- UNITED STATES --</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="">-- CANADA --</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NF">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="PQ">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon Territory</option>
<option value="">-- AUSTRALIA --</option>
<option value="AC">Australian Capital Territory</option>
<option value="NW">New South Wales</option>
<option value="NO">Northern Territory</option>
<option value="QL">Queensland</option>
<option value="SA">South Australia</option>
<option value="TS">Tasmania</option>
<option value="VC">Victoria</option>
<option value="WS">Western Australia</option>
</select>

                        <div><label for="zip">Zip Code</label></div>
                        <input name="zip" id="zip" type="text" placeholder="Enter the  Zip" maxlength="50" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="ph">Phone Number</label></div>
                        <input name="ph" id="phone" type="text" placeholder="Enter the  Phone" maxlength="50" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="email">Email</label></div>
                        <input name="email" id="email" type="text" placeholder="Enter the Email" maxlength="50" pattern="[A-Za-z]{1,50}">   
  
  <div class="dgend">Gender</div>
                                        <span class="gend">
                                                        M<input type="radio" name="gender" value="M" id="male" checked="checked">
                                                        F<input type="radio" name="gender" value="F" id="female" >                        
                                        </span>

  <div class="dgend">Martial Status</div>
                                        <span class="gend">
                                                        Ma<input class="mard" type="radio" name="ma" value="ma" id="male" checked="checked">
                                                        Un<input type="radio" name="um" value="F" id="um" >                       
                                        </span>
  
  
  
  <div><label for="userbday">Date of Birth</label></div>
                        <input type="date" name="birthday" id="date" min='1899-01-01'>    
  
                        <input class="button" type="submit" value="Send" name="submit">
                <input class="button" type="submit" value="Reset" name="submit" onclick="ClearFields();">
                  </form>            
            
            



    

<footer class="footer">
  <a href="www.google.com" target="_blank" style="color: blue;">Copyright</a> © 2020, All Right Reserved <a href="www.youtube.com" target="_blank" style="color: blue;">Visit the site</a>
</footer>
</body>
</html>

now, copy the whole code save as with extension .html and you will get the final output

Here the code with the validation form from the client side:

<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<style>
body {
  font-family: Helvetica;
  margin: 0;
}
a {
  text-decoration: none;
  color: #000;
}
.site-header { 
  border-bottom: 1px solid #ccc;
  padding: .5em 1em;
}

.site-header::after {
  content: "";
  display: table;
  clear: both;
}

.site-identity {
  float: left;
}

.site-identity h1 {
  font-size: 1.5em;
  margin: .7em 0 .3em 0;
  display: inline-block;
}

.site-identity img {
  max-width: 55px;
  float: left;
  margin: 0 10px 0 0;
}

.site-navigation {
  float: right;
}

.site-navigation ul, li {
  margin: 0; 
  padding: 0;
}

.site-navigation li {
  display: inline-block;
  margin: 1.4em 1em 1em 1em;
}

.footer {
position: relative;
  text-align: center;
  bottom: 0;
  width: 100%;
  padding: 3px;
  height: 25px;
  background-color: #f5f5f5;
        }

#info{
                font-weight: bold;
                color:red;
        }
  form div {
          text-align: left;
          margin: 5px 3px;
          font-size: 22px;      
  }
  
  
  
  input[type="radio"] {
          margin: 4px 0px 20px -105px;
  }
  
  .gend {
          display: flex;
          margin-left: 64px;
  }

  
  .dgend {
                text-align: center;
    margin: -5px 56px 5px 4px;
  }
  
  input[type="date"] {
          font-size:16px;
          color:#252e387a;
  }
  
  input::placeholder {
          font-size:16px;
          color:#252e387a;
  }
  
  form {
          position:relative;
          width:365px;
          height:100%;
          margin:50px auto 100px;
          text-align:center;
          background:#eeeeef;
          padding:40px;
          -webkit-border-radius:40px 0 0 0;
          -moz-border-radius:40px 0 0 0;
                border-radius: 50px 7px 50px 7px;
                box-shadow: -9px -11px 0px 2px #eef1fb38, inset 10px 7px 0px 0px #a3a7b1f2;
         
  }
  
  h4 {
          font-family: 'Source Sans Pro', sans-serif;
          font-size:2em;
          font-weight:300;
          margin: -24px 13px 12px 12px;
          color:#000;
          text-shadow:1px 1px 0px white;
  }
  
  input {
          display:block;
          width:315px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
  }
  
  input:focus {
          background:#fafafa;
  }


  select {
          display:block;
          width:350px;
          padding:14px;
          -webkit-border-radius:6px;
          -moz-border-radius:6px;
          border-radius:6px;
          border:0;
          margin-bottom: 20px;
          color:#7f8c8d;
          font-weight:600;
          font-size:16px;
    background-color: #fff;
  }
  
  select:focus {
          background:#fafafa;
  }

 
  
  .button {
                position: relative;
    float: left;
    width: 145px;
    margin-top: 10px;
    background: #507492;
    color: #fff;
    font-weight: 400;
    text-shadow: 1px 1px 0px #2d7baf;
    box-shadow: -7px -6px 0px #9c9c9cc4;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    outline:none;
}
input {
    display: block;
    width: 315px;
    padding: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 0;
    margin-bottom: 20px;
    color: #7f8c8d;
    font-weight: 600;
    font-size: 16px;
  }  
   
  .button:hover {
         background-color:#3a5e7bdb;;
         border-bottom-right-radius: 32%;
          border-bottom-left-radius: 32%;
  } 
  
   input [type="checkbox"] {
           width:10px;
   }
  
  .button {
  cursor: pointer;
  font-weight: bold;    
  }

</style>
<script>
function ClearFields() {

     document.getElementById("username").value = "";
     document.getElementById("password").value = "";
  
 document.getElementById("fname").value = ""; 
  
document.getElementById("lname").value = "";  
  
 document.getElementById("ads1").value = ""; 

document.getElementById("ads2").value = "";  
  
document.getElementById("city").value = "";  
  
document.getElementById("state").value = "";  
  
document.getElementById("zip").value = "";  
  
document.getElementById("phone").value = "";  
  
document.getElementById("email").value = "";  
  
document.getElementById("date").value = "";      
}
</script>
<script>
const form = document.querySelector('form');

function insertAfter(newNode, referenceNode) {
  this.insertBefore(newNode, referenceNode.nextElementSibling);
  
  return newNode;
}

// Takes a single argument, a form input field, and replaces the browsers
// native rendering of form validation errors. Fields where this override
// is applied will display validation errors only when the field is
// invalid and loses focus, or when the field is invalid and it's parent
// form is submitted. When the field regains focus, the validation message
// will update as the user updates the field, finally removing the error
// altogether once the validation constraints have been met.
class FieldValidator {
  constructor(field) {
    this._field = field;
    this._error = null;
    
    this._onInvalid = this._onInvalid.bind(this);
    this._onInput = this._onInput.bind(this);
    this._onBlur = this._onBlur.bind(this);
    
    this.bindEventListeners();
  }
  
  bindEventListeners() {
    this._field.addEventListener('invalid', this._onInvalid);
    this._field.addEventListener('input', this._onInput);
    this._field.addEventListener('blur', this._onBlur);
  }
  
  // Displays an error message and adds error styles and aria attributes
  showError() {
    let errorNode;
    
    if (this._error !== null) {
      return this.updateError();
    }
    
    this._error = document.createElement('div');
    this._error.className = 'help-block';
    this._error.innerHTML = this._field.validationMessage;
    
    this._field.setAttribute('aria-invalid', 'true');
    this._field.closest('.form-group').classList.add('has-error');
    
    insertAfter.call(this._field.parentNode, this._error, this._field);
  }
  
  // Updates an existing error message
  updateError() {
    if (this._error === null) return;
    
    this._error.innerHTML = this._field.validationMessage;
  }
  
  // Hides an error message if one is being displayed
  // and removes error styles and aria attributes
  hideError() {
    if (this._error !== null) {
      this._error.parentNode.removeChild(this._error);
      this._error = null;
    }

    this._field.removeAttribute('aria-invalid');
    this._field.closest('.form-group').classList.remove('has-error');
  }
  
  // Suppress the browsers default error messages
  _onInvalid(event) {
    event.preventDefault();
  }
  
  // When the user inputs something in to the field,
  // hide the error message if the field is now valid,
  // otherwise update the existing error if one is being shown
  _onInput(event) {
    if (this._field.validity.valid) {
      this.hideError();
    } else {
      this.updateError();
    }
  }
  
  // When this field loses focus and is invalid, then
  // show the error message
  _onBlur(event) {
    if ( ! this._field.validity.valid) {
      this.showError();
    }
  }
}

Array.prototype.slice.call(form.elements).forEach((element) => {
  element._validator = new FieldValidator(element);
});

// For some reason without setting the forms novalidate option
// we are unable to focus on an input inside the form when handling
// the 'submit' event
form.setAttribute('novalidate', true);

// When the form is submitted and fields don't pass validation
// we show the error messages for invalid fields
form.addEventListener('invalid', (event) => {
  event.preventDefault();
  
  event.target._validator.showError();
}, true);

// Suppress the submit event when validation fails and
// focus on the first invalid field
form.addEventListener('submit', (event) => {
  if ( ! form.checkValidity()) {
    event.preventDefault();
    
    form.querySelectorAll(':invalid')[0].focus();
    return;
  }
  
  console.log('submit');
  event.preventDefault();
});
</script>

</head>
<body>
<header class="site-header">
  <div class="site-identity">
    <a href="#"><img src="https://images.unsplash.com/photo-1542353436-312f0e1f67ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=554&q=80" style="background-color: red;"  /></a>
    <h1><a href="#">My Website</a></h1>
  </div>  
  <nav class="site-navigation">
    <ul class="nav">
      <li><a href="#">Home</a></li> 
      <li><a href="#">Registration</a></li> 
      <li><a href="#">Annimation</a></li> 
    </ul>
  </nav>
</header>


<header class="site-header">
  <div class="site-identity">
    <a href="#"><img src="https://images.unsplash.com/photo-1542353436-312f0e1f67ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=554&q=80" style="background-color: red;"  /></a>
    <h1><a href="#">My Website</a></h1>
  </div>  
  <nav class="site-navigation">
    <ul class="nav">
      <li><a href="#">Home</a></li> 
      <li><a href="#">Registration</a></li> 
      <li><a href="#">Annimation</a></li> 
    </ul>
  </nav>
</header>

<form action="#" method="post" name="main_form">
  <div class="form-group">
                        <h4>Registration info</h4>
                                <div><label for="username">Username</label></div>
                        <input name="username" id="username" type="text" placeholder="Enter Username"  minlength="6" maxlength="50"  pattern="[A-Za-z]{1,50}">
                                        <div><label for="userLastname">Password</label></div>
                        <input name="password" id="password" type="password" placeholder="Enter Password"  minlength="8" maxlength="50" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$" maxlength="50">
                                
                        <div><label for="firstname">First Name</label></div>
                        <input name="fname" id="fname" type="text" placeholder="Enter First Name" maxlength="50" pattern="[A-Za-z]{1,50}">  
  
  
                        <div><label for="lastname">Last Name</label></div>
                        <input name="lname" id="lname" type="text" placeholder="Enter Last Name" maxlength="50" pattern="[A-Za-z]{1,50}">  
  
                        <div><label for="ad1">Address Line 1</label></div>
                        <input name="ads" id="ads1" type="text" placeholder="Enter the  Address" maxlength="100" pattern="[A-Za-z]{1,50}">
  
                        <div><label for="ad2">Address Line 2</label></div>
                        <input name="adss" id="ads2" type="text" placeholder="Enter the  Address" maxlength="100" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="ad1">City</label></div>
                        <input name="city" id="city" type="text" placeholder="Enter the  City" maxlength="50" pattern="[A-Za-z]{1,50}">
  
                        <div><label for="ad1">State</label></div>  
  <select name="state">
<option selected value="">State...</option>
<option value="ZZ">None</option>
<option value="">-- UNITED STATES --</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="">-- CANADA --</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NF">Newfoundland and Labrador</option>
<option value="NT">Northwest Territories</option>
<option value="NS">Nova Scotia</option>
<option value="NU">Nunavut</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="PQ">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="YT">Yukon Territory</option>
<option value="">-- AUSTRALIA --</option>
<option value="AC">Australian Capital Territory</option>
<option value="NW">New South Wales</option>
<option value="NO">Northern Territory</option>
<option value="QL">Queensland</option>
<option value="SA">South Australia</option>
<option value="TS">Tasmania</option>
<option value="VC">Victoria</option>
<option value="WS">Western Australia</option>
</select>

                        <div><label for="zip">Zip Code</label></div>
                        <input name="zip" id="zip" type="text" placeholder="Enter the  Zip"  minlength="5" maxlength="10" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="ph">Phone Number</label></div>
                        <input name="ph" id="phone" type="text" placeholder="Enter the  Phone" maxlength="12" pattern="[A-Za-z]{1,50}"> 
  
                        <div><label for="email">Email</label></div>
                        <input name="email" id="email" type="text" placeholder="Enter the Email" maxlength="50" pattern="[email protected]">   
  
  <div class="dgend">Gender</div>
                                        <span class="gend">
                                                        M<input type="radio" name="gender" value="M" id="male" checked="checked">
                                                        F<input type="radio" name="gender" value="F" id="female" >                        
                                        </span>

  <div class="dgend">Martial Status</div>
                                        <span class="gend">
                                                        Ma<input class="mard" type="radio" name="ma" value="ma" id="male" checked="checked">
                                                        Un<input type="radio" name="um" value="F" id="um" >                       
                                        </span>
  
  
  
  <div><label for="userbday">Date of Birth</label></div>
                        <input type="date" name="birthday" id="date" min='1899-01-01'>    
  
                        <input class="button" type="submit" value="Send" name="submit">
                <input class="button" type="submit" value="Reset" name="submit" onclick="ClearFields();">
  </div>
                  </form>            
            

<footer class="footer">
  <a href="www.google.com" target="_blank" style="color: blue;">Copyright</a> © 2020, All Right Reserved <a href="www.youtube.com" target="_blank" style="color: blue;">Visit the site</a>
</footer>


</body>
</html>