Untitled

<!DOCTYPE html>
<html lang="en-US" class="Html" id="Main" dir="auto">
<head class="Head" id="Main">
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="123">
<meta name="author" content="123">
<title class="Title" id="Title">Registration</title>
</head>
<body class="Body" id="Main">
<nav>
    <ul>
        <li><a href="home.php">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="albums.php">The Albums</a></li>
        <li><a href="shoppingcart.php">Shopping Cart</a></li>
    </ul>
</nav>
<div class="a00">Registration</div>


<script type="text/javascript">

function FormValidation(theForm) {
var errors = "";
var email = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
var username = /^[a-zA-Z0-9]{3,15}$/;
var password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*][a-zA-Z0-9!@#$%^&*]{8,16}$/;

if (theForm.one.value == "") {
    errors += "Please enter your username name! n";
}

else if (!username.test(theForm.one.value)) {
    errors += "Username is wrong! n";
    errors += "Username includes wrong characters! n";
    errors += "Username must include only alphabetical and numeric characters! n";
    errors += "Username must be between 3 and 15 characters! n";
}

if (theForm.two.value == "") {
    errors += "Please enter your password! n";
}

else if (!password.test(theForm.two.value)) {
    errors += "Password is wrong! n";
    errors += "Password includes wrong characters! n";
    errors += "Password must include at least one uppercase alphabetical character! n";
    errors += "Password must include at least one lowercase alphabetical character! n";
    errors += "Password must include at least one numerical character! n";
    errors += "Password must include at least one special character! n";
    errors += "Username must be between 8 and 16 characters! n";
}

if (theForm.three.value == "") {
    errors += "Please enter your e-mail address! n";
}

else if (!email.test(theForm.three.value)) {
    errors += "E-mail address is wrong n";
    errors += "E-mail address must be in the right format! n";
}

if (!errors == "") {
    alert("LIST OF ERRORS: n" + errors);
    return false;
} else {
    return true;
}
}

function ShowHelpUsername() {
document.getElementById("demo1").innerHTML = "Help: Fill in your username. It must be unique and easy to remmeber.";
}

function ShowHelpPassword() {
document.getElementById("demo1").innerHTML = "Help: Fill in your password. It must include 1 uppercase alphabetical character, 1 lowercase alphabetical character, 1 numeric character, and 1 special character.";
}

function ShowHelpEmail() {
document.getElementById("demo1").innerHTML = "Help: Fill in your personal electronic mail.";
}

</script>


<?php
$con = mysqli_connect("", "","", "");
if (!$con) {
die("Error: " . mysqli_connect_error());
}

if (isset($_POST['register'])) {

$username=mysql_real_escape_string($_POST['one']);
$email=mysql_real_escape_string($_POST['three']);
$password=mysql_real_escape_string($_POST['two']);
$mysqlget="INSERT INTO users (username,email,password) VALUES ('$username','$email','$password')";

mysqli_query($con, $mysqlget) or die ("Error: " . mysql_error($con));

}
?>

<form method="POST" action="registration.php" class="myForm" name="myForm" onSubmit="javascript:return FormValidation(this)">
<div class="form-group-username">
<label for="username">Username</label><br>
<input type="text" placeholder="Between 3 and 15 characters" class="form-control-1" id="one" name="one" onfocus="ShowHelpUsername()">
</div>
<div class="form-group-password">
<label for="password">Password</label><br>
<input type="password" placeholder="Between 8 and 16 characters" class="form-control-2" id="two" name="two" onfocus="ShowHelpPassword()">
</div>
<div class="form-group-email">
<label for="e-mail">E-mail</label><br>
<input type="text" placeholder="For safety purposes" class="form-control-3" id="three" name="three" onfocus="ShowHelpEmail()">
</div>
<div class="form-group-submit">
<input type="submit" name="register" class="submit_form_55" value="Create Account">
</div>
<div class="form-group-help">
<p id="demo1"></p>
</div>

</form>
</body>
</html>