I'm starting to learn some PHP/HTML and some JS and started an easy project. So I have this little combined login/register script in PHP/HTML which works fine.
In the registration, I have some security checks for username and password, as well as an email validation. If one of these criteria isn't met, it sends an error to the page. Its showing on the bottom of the next page, but I would like to have it in the form under the email, username or password (depending on the error).
I've searched through google and found some posts with similar problems, but all that wasn't really helpful.
<!doctype html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.9/css/unicons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<?php
?>
<div class="section">
<div class="container">
<div class="row full-height justify-content-center">
<div class="col-12 text-center align-self-center py-5">
<div class="section pb-5 pt-5 pt-sm-2 text-center">
<h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6>
<input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
<label for="reg-log"></label>
<div class="card-3d-wrap mx-auto">
<div class="card-3d-wrapper">
<div class="card-front">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">Log In</h4>
<div class="login">
<form target="_self" method="post" autocomplete="off">
<div class="form-group">
<input type="email" id="Lemail" name="Lemail" class="form-style" placeholder="Email">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" id="Lpassword" name="Lpassword" class="form-style" placeholder="Password">
<i class="input-icon uil uil-lock-alt"></i>
</div>
<input type="submit" value="Login" class="btn mt-4">
</form>
</div>
<p class="mb-0 mt-4 text-center"><a href="Link-to-page.com" class="link">Forgot your password?</a></p>
</div>
</div>
</div>
<div class="card-back">
<div class="center-wrap">
<div class="section text-center">
<div class="register">
<h4 class="mb-3 pb-3">Sign Up</h4>
<form target="_self" method="post" autocomplete="off">
<div class="form-group">
<input type="text" id="Rusername" name="Rusername" class="form-style" placeholder="Username">
<i class="input-icon uil uil-user"></i>
</div>
<div class="form-group mt-2">
<input type="email" id="Remail" name="Remail" class="form-style" placeholder="Email">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" id="Rpassword" name="Rpassword" class="form-style" placeholder="Password">
<i class="input-icon uil uil-lock-alt"></i>
</div>
<input type="submit" value="Register" class="btn mt-4">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
include 'config.php';
if (!isset($_POST['Rusername'], $_POST['Rpassword'], $_POST['Remail'])) {
exit('Please complete the registration form!'); }
if (empty($_POST['Rusername']) || empty($_POST['Rpassword']) || empty($_POST['Remail'])) {
exit('Please complete the registration form'); }
if (!filter_var($_POST['Remail'], FILTER_VALIDATE_EMAIL)) {
exit('This is no valid Email.');
}
if (preg_match('/^[a-zA-Z0-9]+$/', $_POST['Rusername']) == 0) {
exit('Username is not valid!');
}
if (strlen($_POST['password']) >26 || strlen($_POST['Rpassword']) <14) {
exit('Password must be between 14 and 26 characters.'); //I want this message to display below the <input type="password" id="Rpassword"...> (line 62)
}
if (isset($_POST['Rpassword'])) {
$password = $_POST['Rpassword'];
$uppercase = preg_match('@[A-Z]@', $password);
$lowercase = preg_match('@[a-z]@', $password);
$number = preg_match('@[0-9]@', $password);
$specialchars = preg_match('@[^/w]@', $password);
if(!$uppercase || !$lowercase || !$number || !$specialchars) {
exit('Password is too weak. It must contain at least 1 uppercase, 1 lowercase, 1 number and 1 special character.');
}
}
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
$stmt->bind_param('s', $_POST['Rusername']);
$stmt->execute();
$stmt->store_result();
if ($stmt->num_rows > 0) {
echo 'Username exists, please choose another!';
} else {
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
$password = password_hash($_POST['Rpassword'], PASSWORD_DEFAULT);
$stmt->bind_param('sss', $_POST['Rusername'], $password, $_POST['Remail']);
$stmt->execute();
echo 'You have successfully registered! You can now login!';
} else {
echo 'Could not prepare statement!';
}
}
$stmt->close();
} else {
echo 'Could not prepare statement!';
}
$con->close();
?>
</body>
</html>
Haven't really tried much. Just searched for posts with similar or the same problem, but couldn't find anything that could work for me.
You have to write the validation codes in the middle of the form element :
e.g for login validation :
<div class="login">
<form target="_self" method="post" autocomplete="off">
<div class="form-group">
<input type="email" id="Lemail" name="Lemail" class="form-style" placeholder="Email">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" id="Lpassword" name="Lpassword" class="form-style" placeholder="Password">
<i class="input-icon uil uil-lock-alt"></i>
</div>
<input type="submit" value="Login" class="btn mt-4">
</form>
<?php
//Your validation code here and echo the error if does not meet the criteria
?>
</div>