Form validation

helpers.js

//Functions provided by : https://github.com/Minter27/Bookshelf.git


// A function to check the value of two HTML elements by their Id
function checkStrings(str1, str2){
	if ($(`#${str1}`).val() != $(`#${str2}`).val()){
		return false;
		}
	else
		return true;
}

// A function to check mismatch between a password and its confirmation
//And that add a .valid property to the confirmation field with a boolean value)
function checkConfirmation(confirmation_id, password_id){
	let confirmation  = document.getElementById(confirmation_id);
	let $confirmation = $(`#${confirmation_id}`);

	if (!checkStrings(confirmation_id, password_id)){

		//Updating validation of the input
        $confirmation.valid = false

        //Add invalid feedback if don't exist
		if (!($confirmation.parent().has("div").length)){
			confirmation.classList.add("is-invalid");
			$confirmation.parent().append("<div class=\"invalid-feedback\">"
			                         + "Password and its confirmation don't match"
			                         + "</div>");
		}
	}
	else if (checkStrings(confirmation_id, password_id)) {

		//Updating validation of the input
		$confirmation.valid = true

        //Remove error messages if needed
		if ($confirmation.parent().has("div").length) {
			confirmation.classList.remove("is-invalid");
			$confirmation.parent().children("div.invalid-feedback").remove();
		}
	}
}

register.html

{% extends "layout.html" %}

{% block script %}
    <script src="/static/js/register.js"></script>
{% endblock %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <form action="/register" method="post" class="needs-validation">
        <div class="form-group">
            <input autocomplete="off" id="username" autofocus class="form-control"
             name="username" placeholder="Username" type="text" required/>
        </div>
        <div class="form-group">
            <input class="form-control" id="password" name="password" placeholder="Password"
            type="password"
            pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[@_!#$%^&*()<>?/\|}{~:])[A-Za-z\d@_!#$%^&*()<>?/\|}{~:]{5,}$" required/>
        </div>
        <div class="form-group">
            <input class="form-control" id="confirmation" name="confirmation"
            placeholder="Confirmation" type="password" required/>
        </div>
        <button class="btn btn-primary" id="button" type="submit" disabled>Register</button>
    </form>
{% endblock %}

register.js

$(document).ready(() => {

    $('#username').on('input',function() {

        // Check whether a delay is already in progress, delete it
        if (this.delay) clearTimeout(this.delay);

        // Attach a delay property to the input element
        //(to don't make 1 request every time that the user type one letter)
        this.delay = setTimeout(() => {

            //Checking validity of the username
            $.getJSON("/check", {username: $("#username").val()}, (user) => {
            if (user.taken){

                //updating validation of the input if is needed
                if ($(this).prop('validationMessage') == '') {
                    this.setCustomValidity('You have to put a valid username!!');
                }

                //Add invalid feedback if don't exist
                if (!$('#username').parent().has("div").length) {

                    // Add invalid class to elements
                    $(this).addClass('is-invalid');

                    // Append necessary html for error reporting
                    $('#username').parent().append(
                    "<div class=\"invalid-feedback\">"
                    + "The username is already taken"
                    + "</div>"
                    );
                }
            }
            else if (!user.taken) {

                //updating validation of the input if is needed
                if (!$(this).prop('validationMessage') == '') {
                    this.setCustomValidity('');
                }

                //Remove invalid feedback if exist
                if ($('#username').parent().has("div").length) {
                    // Remove invalid class to elements
                    $(this).removeClass('is-invalid');

                    // Remove html added earlier
                    $('#username').parent().children("div.invalid-feedback").remove();
                 }
            }
            });
        }, 800);
    });

    //Checking validity of the password
    $("#password").on('input',function() {

        // Invalid input, show error
        if (this.validity.patternMismatch) {

            //updating validation of the input if is needed
            if ($(this).prop('validationMessage') == '') {
                this.setCustomValidity('You have to put a valid password format!');
            }
             // Ensure not to duplicate by checking if the error is showing
            if (!$("#password").parent().has("div").length) {

                // Add invalid class to elements
                $(this).addClass('is-invalid');

                // Append necessary html for error reporting
                $("#password").parent().append(
                "<div class=\"invalid-feedback\">"
                + "Have to contain at least one letter, number, 5 characters"
                + "and symbol: [@_!#$%^&*()<>?/\|}{~:]"
                + "</div>"
                );
            }
        }
        // Valid input
        else if (!this.validity.patternMismatch) {

            //updating validation of the input if is needed
            if (!$(this).prop('validationMessage') == '') {
                this.setCustomValidity('');
            }
            //Remove error messages if exist
            if ($("#password").parent().has("div").length) {
                // Remove invalid class to elements
                $(this).removeClass('is-invalid');

                // Remove html added earlier
                $("#password").parent().children("div.invalid-feedback").remove();
            }
        }
    });
    //Making sure password and its confirmation match
	$("#confirmation").on('input', function() {
		checkConfirmation("confirmation", "password");
	});
	$("#password").on('input', function() {
		checkConfirmation("confirmation", "password");
	});

    //Don't submit the form if is invalid
    $('form.needs-validation').on('submit', function(event){
        if (this.checkValidity() == false){
            event.preventDefault();
            event.stopPropagation();
        }
    });
});