<!DOCTYPE html> 
<html> 
<head>

<style>
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	text-decoration: none;
	list-style: none;
	font-family: 'Nunito', sans-serif;
}


img {
   max-width: auto;
  height: auto;
}

.container{
	display: flex;
	max-width: 500px;
	width: 100%;
	height: 350px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.container .form-group,
{
	width: 50%;
	height: 100%;
	padding: 30px;
}

.container .form-group .form-control{
	width: 100%;
	padding: 10px 15px;
	border: 0;
	font-size: 12px;
	background: #ecebeb;
	
}
.container .form-group .form-control h1{
	color:	#FF0000;
	
}

.wrapper  h1{
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	color: #fff;
	font-size: 20px;
}

</style> 
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href= 
    "https://maxcdn.bootstrapcdn.com/bootstrap/ 
     4.0.0/css/bootstrap.min.css"> 
    <!-- jQuery library -->
    <script src= 
    "https://ajax.googleapis.com/ajax/libs/ 
     jquery/3.3.1/jquery.min.js"> 
    </script> 
    <!-- Popper JS -->
    <script src= 
    "https://cdnjs.cloudflare.com/ajax/libs/ 
     popper.js/1.12.9/umd/popper.min.js"> 
    </script> 
    <!-- Latest compiled JavaScript -->
    <script src= 
    "https://maxcdn.bootstrapcdn.com/bootstrap/ 
     4.0.0/js/bootstrap.min.js"> 
    </script>
 <link rel="stylesheet" href="styles.css">	
 
</head> 
  
<body><br> 
    
   <img src="images/e14cc583_z.webp" style="width:100%;height:auto" > 
  
    <div class="container">
			
      <div class="col-lg-8  
           m-auto d-block"> 
		   <h1>Register Form.</h1>
        <form> 
          <div class="form-group"> 
              <label for ="user"> 
                Username:  
              </label> 
              <input type="text"
                    name="username" id="usernames"
                    class="form-control"> 
              <h5 id="usercheck" > 
                   Username is missing 
              </h5> 
          </div> 
  
  
          <div class="form-group"> 
              <label for="user"> 
                    Email:  
              </label> 
              <input type="email" name="email"
                id="email" required  
                class="form-control"> 
              <small id="emailvalid" class="form-text 
                text-muted invalid-feedback"> 
                     Your email must be a valid email
              </small> 
          </div> 
  
          <div class="form-group"> 
              <label for="password">  
                    Password: 
              </label> 
              <input type="password" name="pass" 
                id="password" class="form-control"> 
              <h5 id="passcheck"> 
                Please Fill the password
              </h5> 
          </div> 
  
          <div class="form-group"> 
              <label for="conpassword">  
                    Confirm Password:  
              </label> 
              <input type="password" name="username"
                    id="conpassword" class="form-control"> 
              <h5 id="conpasscheck"> 
                   Password didn't match 
              </h5> 
          </div> 
  
          <input type="submit" id="submitbtn" 
             value="Submit" class="btn btn-primary">
			 <a href="">Login</a>

			
        </form> 
      </div> 
    </div> 
  
    <!--  Including app.js jQuery Script -->
      <script> 
$(document).ready(function () {  
     
// Validate Username 
    $('#usercheck').hide();     
    let usernameError = true; 
    $('#usernames').keyup(function () { 
        validateUsername(); 
    }); 
      
    function validateUsername() { 
      let usernameValue = $('#usernames').val(); 
      if (usernameValue.length == '') { 
      $('#usercheck').show(); 
          usernameError = false; 
          return false;
      }  
      else if((usernameValue.length > 3)||  
              (usernameValue.length < 10)) { 
          $('#usercheck').show(); 
          $('#usercheck').html 
("**length of username must be between 3 and 10"); 
          usernameError = false; 
          return false; 
      }  
      else { 
          $('#usercheck').hide(); 
      } 
    } 
  
   // Validate Email 
    const email =  
        document.getElementById('email'); 
    email.addEventListener('blur', ()=>{ 
       let regex = 
/^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/; 
       let s = email.value; 
       if(regex.test(s)){ 
          email.classList.remove( 
                'is-invalid'); 
          emailError = true; 
        } 
        else{ 
            email.classList.add( 
                  'is-invalid'); 
            emailError = false; 
        } 
    }) 
      
   // Validate Password 
    $('#passcheck').hide(); 
    let passwordError = true; 
    $('#password').keyup(function () { 
        validatePassword(); 
    }); 
    function validatePassword() { 
        let passwrdValue =  
            $('#password').val(); 
        if (passwrdValue.length == '') { 
            $('#passcheck').show(); 
            passwordError = false; 
            return false; 
        }  
        if ((passwrdValue.length > 3)||  
            (passwrdValue.length < 10)) { 
            $('#passcheck').show(); 
            $('#passcheck').html 
("**length of your password must be between 3 and 10"); 
            $('#passcheck').css("color", "red"); 
            passwordError = false; 
            return false; 
        } else { 
            $('#passcheck').hide(); 
        } 
    } 
          
// Validate Confirm Password 
    $('#conpasscheck').hide(); 
    let confirmPasswordError = true; 
    $('#conpassword').keyup(function () { 
        validateConfirmPasswrd(); 
    }); 
    function validateConfirmPasswrd() { 
        let confirmPasswordValue =  
            $('#conpassword').val(); 
        let passwrdValue =  
            $('#password').val(); 
        if (passwrdValue != confirmPasswordValue) { 
            $('#conpasscheck').show(); 
            $('#conpasscheck').html( 
                "**Password didn't Match"); 
            $('#conpasscheck').css( 
                "color", "red"); 
            confirmPasswordError = false; 
            return false; 
        } else { 
            $('#conpasscheck').hide(); 
        } 
    } 
      
// Submitt button 
    $('#submitbtn').click(function () { 
        validateUsername(); 
        validatePassword(); 
        validateConfirmPasswrd(); 
        validateEmail(); 
        if ((usernameError == true) &&  
            (passwordError == true) &&  
            (confirmPasswordError == true) &&  
            (emailError == true)) { 
            return true; 
        } else { 
            return false; 
        } 
    }); 
});  
</script>


  </body> 
</html>