Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" type="text/css" href="Index.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


  </head>
<section class="navbar">
 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Eve Interface</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Personal Information</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Corporation Information</a>
      </li>

    </ul>
    <ul class="nav navbar-nav navbar-right">
    			<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#Registration"> Registration</a></li>
				<li class="nav-item"><a class="nav-link" href="#" data-toggle="modal" data-target="#Login"> Login</a></li>
	</ul>
    </div>
    </nav>
  </section>


<div class="modal fade" id="Registration" tabindex="-1" role="dialog" aria-labelledby="RegistrationModal" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">
		 <div class="modal-content">
			 <form  autocomplete="nope" id="Registration" method="POST">
     		 <div class="modal-header">
       			 <h5 class="modal-title" id="registrationmodal">Registration</h5>
        		 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     		 </div>
        <div class="modal-body" style="text-align: center;">
				 <input type="text" name="username" id="username" placeholder="Username" required></br>
			 	 <div Id="Username_Error"></div>
				 <input type="email" name="email" id="email" placeholder="Email" required></br>
		      	 <div Id="Email_Error"></div>
		      	 <input type="password" name="password" id="Registration_password" placeholder="Password" required></br>
			       <div Id="Password_Error"></div>
             </div><!--  Closes modal-body -->
		  	 <div class="modal-footer">
         		 <button class="btn btn-default" type="submit">Submit</button>
             </div><!-- Closes modal-footer-->
			 </form>
     	 </div> <!-- Closes modal-content-->
	</div>
</div>

<div class="modal fade" id="Login" tabindex="-1" role="dialog" aria-labelledby="LoginModal" aria-hidden="true">
	<div class="modal-dialog modal-sm" role="document">
		 <div class="modal-content">
			 <form novalidate autocomplete="nope" id="Registration">
     		 <div class="modal-header">
       			 <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        		 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     		 </div>
         <div class="modal-body" style="text-align: center;">
			       <input type="email" name="Login_Email" id="Login_Email" placeholder="Email"></br>
			       <input type="password" name="Login_Password" id="Login_Password" placeholder="Password"></br>

         </div><!--  Closes modal-body -->
			   <div class="modal-footer">
         		 <button class="btn btn-default" disable>Submit</button>
             </div><!-- Closes modal-footer-->
			 </form>
     	 </div> <!-- Closes modal-content-->
	</div>
</div>


    <script>
    $(document).ready(function () {

        $('#username').on('focusout', function (event) {
            var username = document.getElementById('username').value;
            var pattern = /[!,@,#,$,%,^,&,*,(,),~,<,>,?,;,:,]/;
            $('#Username_Error').text("");
            if (username.length == 0) { $('#Username_Error').text("Please enter a Username!") }
            if (username.length < 5) { $('#Username_Error').text("Please enter a Longer Username!") }
            if (username.length > 20) { $('#Username_Error').text("Please enter a Username Less than 20 Characters!") }
            if (pattern.test(username)) { $('#Username_Error').text("Please enter a Username with only Letters and Numbers!") }
        })

        $('#email').on('focusout', function (event) {
            var email = document.getElementById('email').value;
            var patternemail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
            var pattern_special = /[a-zA-Z0-9]/;
            $('#Email_Error').text("");
            if (email.length == 0) { $('#Email_Error').text("Please enter a Email!") }
            if (!patternemail.test(email)) { $('#Email_Error').text("Please enter a Valid Email example Johndoe@gmail.com!") }
        })

        $('#Registration_password').on('focusout', function (event) {
            var password = document.getElementById('Registration_password').value;
            $('#Password_Error').text("");
            if (password.length <= 6) { $('#Password_Error').text("Please enter a Password with more then 6 Characters!") }
           })


    $('#Registration').submit(function () {
        var username = document.getElementById('username').value;
        var email = document.getElementById('email').value;
        var password = document.getElementById('Registration_password').value;
        var pattern1 = /[!,@,#,$,%,^,&,*,(,),~,<,>,?,;,:,]/;
        var patternemail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

        if (username.length == 0) {
          alert("Please enter a Username!");
          return false;
        }
        if (username.length > 20) {
            alert("Please enter a Username Less than 20 Characters!");
            return false;
        }
        if (pattern1.test(username)) {
            alert("Please enter a Username with only Letters and Numbers!");
            return false;
        }
        if (email.length == 0) {
            alert("Please enter a Email!");
            return false;
        }
        if (!patternemail.test(email)) {
           alert("Please enter a Valid Email example Johndoe@gmail.com!");
            return false;
        }
        if (password.length <= 6) {
          alert("Please enter a Password with more then 6 Characters!");
            return false;
        }

        $.ajax({
            type: "POST",
            url: 'formsubmit.php',
            data:{username : username,  email : email , password : password},
            success: function (data) {
                alert(data);
                event.preventDefault();
            },

        })
    });
    });
</script>


</html>