<form name="registration" novalidate>
Username:<input type="text" name="username" id="username" required><p class="error"></p></br>
Password:<input type="password" name="password1" id="password1" required></br>
Confirm Password:<input type="password" name="password2" id="password2" required></br>
Email:<input type="email" name="email" id="email" required></br>

<input type="submit">


<script>

 (function() {
    var form = document.getElementById('registration');
    var username = document.getElementById('username');
    var password1 = document.getElementById('password1');
    var password2 = document.getElementById('password2');
    var email = document.getElementById('email');

   var CheckUsernameValue function() {
        if (username.value != "") {
            username.setCustomValidity('Please enter a Username!');
            updateErrorMessage();
        } else {
            username.setCustomValidity('');
        }
    };
    var updateErrorMessage = function() {
        form.getElementsByClassName('error')[0].innerHTML = username.validationMessage;
    };

   form.addEventListener('submit', function(event) {
        if (form.classList) form.classList.add('submitted');
        CheckUsernameValue();
        if (!this.CheckUsernameValue()) {
            event.preventDefault();
            updateErrorMessage();
            username.focus();
        }
    }, false);

 });






</script>