How to clear validation message on form after user input

Question

I basically have made a sign up form and included validation messages next to each text field if the data entered is correct but I was wondering once the user has input the correct data how can I clear this message, at the moment it stays present on the screen. I am a beginner so I have a feeling that I am doing this an extremely long way, also any suggestions on how I can check if the username exists in database the same way I am checking validation with javascript. The submit button is unavailable until all required fields are valid. Thanks

<script type="text/javascript">
        function validate()
        {
            var valid = true;

            if (validateUsername() === true && validatePassword() === true &&
                    validateMobileNumber() === true && validateEmail() === true &&
                    validateCity() === true && validatePostode() === true &&
                    validateDOB() === true && validatePasswordVeri() === true)
            {
                valid = false;
            }

            if (valid)
            {
                document.getElementById('submit').disabled = !valid;
            }


        }

        function validateUsername()
        {
            if (registerform.username.value.length === null || registerform.username.value === "")
            {
                document.getElementById('uname').innerHTML = "Please enter a username";
                return false;
               }
            return true;
        }

        function validatePassword()
        {

            if (registerform.password.value.length >= 6 || registerform.password.value === "")
            {
                document.getElementById('pword').innerHTML = "Please enter a password which is 6 or more characters";
                return false;
            }
               return true;
        }


            function validatePasswordVeri()
            else if (registerform.passwordVeri.value !== registerform.password.value || register.passwordVeri.value === "")
            {
                document.getElementById('pwordv').innerHTML = "Passwords do not match";
                return false;
            }
            return true;
        }

        function validateMobileNumber()
        {
            if (registerform.mobileNumber.value.length !== 11 || registerform.mobileNumber.value === "")
            {
                document.getElementById('mobNum').innerHTML = "Please enter a correct mobile number";
                return false;
            }
            return true;
        }

        function validateEmail()
        {
            return true;
        }

        function validatecity()
        {
            if (registerform.city.value === "")
            {
                document.getElementById('userCity').innerHTML = "Please enter a city";
                return false;
            }
            return true;
        }
        function validatePostcode()
        {
            if (registerform.postCode.value === "")
            {
                document.getElementById('pCode').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }
        function validateDOB()
        {
            if (registerform.dateOfBirth.value === "")
            {
                document.getElementById('dob').innerHTML = "Please enter a post code";
                return false;
            }
            return true;
        }



    </script>

HTML FORM

<?php
require_once("config.php");
if (!isset($_POST['submit'])) {
    ?>   <!-- The HTML registration form -->
    <form name="registerform"  method="post">
        Please fill the following form to sign up:<br /><br />

        Username*: <input type="text" name="username" onKeyup="validate()" onBlur="validateUsername();" /><span id="uname"></span><br />
        Password*: <input type="password" name="password" onKeyup="validate()" onBlur="validatePassword();"/><span id="pword"></span><br />
        Password Verify*: <input type="password" name="passwordVeri" onKeyup="validate()" onBlur="validatePassword();"/><span id="pwordv"></span><br />
        First name: <input type="text" name="firstName" /><br />
        Last name: <input type="text" name="lastName" /><br />
        Email*: <input type="email" name="emailAddress" onKeyup="validate()" onBlur="validateEmail();"/><span id="emailAdd"></span><br />
        Relationship Status*: <select name="relationshipStatus" >
            <option value="Single">Single</option>
            <option value="Taken">Taken</option>            
        </select> 
        City*: <input type="text" name="city" onKeyup="validate()" onBlur="validatecity();"/><span id="userCity"></span><br />
        Postcode*: <input type="text" name="postCode" onKeyup="validate()" onBlur="validatePostcode();"/><span id="pCode"></span><br />
        Mobile number*: <input type="tel" name="mobileNumber" onKeyup="validate()" onBlur="validateMobileNumber();"/><span id="mobNum"></span><br />
        Gender*: <select name="gender" >
            <option value="Male">Male</option>
            <option value="Female">Female</option>            
        </select>
        Date of Birth*: <input type="date" name="dateOfBirth" onKeyup="validate()" onBlur="validateDOB();"/><span id="dateOfBirth"></span>(Format: DD-MM-YYYY)<br />

        <input type="submit" id="submit" name="submit" value="Register" disabled="disabled"/>

    </form>
    <?php

Solution 1

You can use element.onblur, which means when we lose focus from an element call some function. For example:

someElement.onblur = function(){ 
    // Code that updates the validation message 
};

This can also be done in jQuery. With $( 'someElement' ).blur(function() { ... });

To you question on checking if it's in the database (I'm assuming using PHP/SQL), we can do this:

 $result = mysqli_query("SELECT * FROM $tbl_usernames WHERE username='$username'");

Then we can check if the username was there with: if(mysqli_num_rows($result) == 1)

Solution 2

Adding an else statement to return the value of your error message span to a non-error state could correct this.

if (!validateUsername())
    {
        document.getElementById('uname').innerHTML = "Please enter a username";
    }else {
        document.getElementById('uname').innerHTML = "";
    }

this should display your error msg and return it to blank when a valid input is present.

I would extend this answer by asking you to consider the cost/gain of validating the entire form on keyup of individual fields along with validating the individual field on blur. if you isolate your validation code into individual functions. then you could validate only the individual field on keyup and the entire form only on submit.

Comments

[JWayne93]

Thanks for the reply but if I use PHP/SQL the username would have to be checked after the submit button has been pressed, would I be right thinking this? I was wondering of a way to display a message saying user already exists as the user inputs in the field

[Spencer Wieczorek]

You can use Ajax with PHP so it does not have to be generated on a whole new page load.

[JWayne93]

Ah yes thanks, I have changed my code a little bit and I have now literally lost my validation messages all together which is pretty worrying I changed back the changes I had made to the validate functions but still no messages. any hints? maybe its my browser

[Spencer Wieczorek]

It appears there is an error within your validatePasswordVeri() function. Change else if to if. And add a { at the start of the function.