Use custom validation
diff --git a/templates/register.htm b/templates/register.htm
index 6a56af6..edfab84 100644
--- a/templates/register.htm
+++ b/templates/register.htm
@@ -2,7 +2,7 @@
<?php echo $SERVICE_NAME;?>
</h1>
-<form action="" method="POST">
+<form class="needs-validation" novalidate action="" method="POST">
<!-- Username input -->
<div class="form-outline mb-3">
<label class="form-label font-weight-bold" for="form3Example3">Username*</label>
@@ -11,6 +11,9 @@
class="form-control <?php if(isset($error) && $error && !isset($_POST['username'])){echo 'border-danger';}?>"
placeholder="johndoe"
value="<?php echo isset($_POST['username']) ? htmlspecialchars($_POST['username']) : '' ?>" />
+ <div class="invalid-feedback">
+ Please choose a username with at least 5 not whitespace characters.
+ </div>
</div>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-3">
@@ -18,21 +21,27 @@
<div class="form-outline">
<label class="form-label font-weight-bold" for="form3Example1">First name*</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_first_name.','.$VAL_USER->max_first_name;?>}" required
- title="At least 3 not whitespace characters" name="name" type="text" id="form3Example1"
+ title="At least 2 not whitespace characters" name="name" type="text" id="form3Example1"
class="form-control <?php if(isset($error) && $error && !isset($_POST['name'])){echo 'border-danger';}?>"
placeholder="John"
value="<?php echo isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '' ?>" />
</div>
+ <div class="invalid-feedback">
+ Please provide a first name with at least 2 not whitespace characters.
+ </div>
</div>
<div class="col">
<div class="form-outline">
<label class="form-label font-weight-bold" for="form3Example2">Last name*</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_last_name.','.$VAL_USER->max_last_name;?>}" required
- title="At least 3 not whitespace characters" name="last_name" type="text" id="form3Example2"
+ title="At least 2 not whitespace characters" name="last_name" type="text" id="form3Example2"
class="form-control <?php if(isset($error) && $error && !isset($_POST['last_name'])){echo 'border-danger';}?>"
placeholder="Doe"
value="<?php echo isset($_POST['last_name']) ? htmlspecialchars($_POST['last_name']) : '' ?>" />
</div>
+ <div class="invalid-feedback">
+ Please provide a last name with at least 2 not whitespace characters.
+ </div>
</div>
</div>
@@ -43,25 +52,29 @@
class="form-control <?php if(isset($error) && $error && !isset($_POST['email'])){echo 'border-danger';}?>"
placeholder="myemail@example.com"
value="<?php echo isset($_POST['email']) ? htmlspecialchars($_POST['email']) : '' ?>" />
+ <div class="invalid-feedback">
+ Please provide a valid email address.
+ </div>
</div>
<!-- Password input -->
<div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="form3Example4">Password*</label>
+ <label class="form-label font-weight-bold" for="pw1">Password*</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_password.','.$VAL_USER->max_password;?>}" required
- title="At least 8 not whitespace characters" name="password" type="password" id="form3Example4"
+ title="At least 8 not whitespace characters" name="password" type="password" id="pw1"
class="form-control <?php if(isset($error) && $error && !isset($_POST['password'])){echo 'border-danger';}?>"
placeholder="********"
value="<?php echo isset($_POST['password']) ? htmlspecialchars($_POST['password']) : '' ?>" />
</div>
<!-- Password input -->
<div class="form-outline mb-3">
- <label class="form-label font-weight-bold" for="form3Example4">Confirm your Password*</label>
+ <label class="form-label font-weight-bold" for="pw2">Confirm your Password*</label>
<input pattern="[^\s]{<?php echo $VAL_USER->min_password.','.$VAL_USER->max_password;?>}" required
- title="At least 8 not whitespace characters" name="password_confirm" type="password" id="form3Example5"
+ title="At least 8 not whitespace characters" name="password_confirm" type="password" id="pw2"
class="form-control <?php if(isset($error) && $error && !isset($_POST['password_confirm'])){echo 'border-danger';}?>"
placeholder="********"
- value="<?php echo isset($_POST['password_confirm']) ? htmlspecialchars($_POST['password_confirm']) : '' ?>" />
+ oninput="validate_pw2(this)"
+ />
</div>
<hr class="mt-2 mb-3" />
<div class="form-outline mb-3">
@@ -92,7 +105,7 @@
href="https://www2.ids-mannheim.de/cosmas2/web-app/datenschutz.html">Privacy Policy</a>.
</label>
<div class="invalid-feedback">
- You need to agree to the EULA in order to proceed.
+ You need to agree to the privacy policy in order to proceed.
</div>
</div>
</div>
@@ -118,4 +131,32 @@
<button name="type" value="register" type="submit" class="btn btn-primary float-right btn-md">Sign up</button>
</form>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+ // Example starter JavaScript for disabling form submissions if there are invalid fields
+ (function () {
+ 'use strict';
+ window.addEventListener('load', function () {
+ // Fetch all the forms we want to apply custom Bootstrap validation styles to
+ var forms = document.getElementsByClassName('needs-validation');
+ // Loop over them and prevent submission
+ var validation = Array.prototype.filter.call(forms, function (form) {
+ form.addEventListener('submit', function (event) {
+ if (form.checkValidity() === false) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ form.classList.add('was-validated');
+ }, false);
+ });
+ }, false);
+ })();
+ function validate_pw2(pw2) {
+ if (pw2.value !== $("#pw1").val()) {
+ pw2.setCustomValidity("Passwords do not match");
+ } else {
+ pw2.setCustomValidity(""); // is valid
+ }
+ }
+</script>
\ No newline at end of file