Question

Hi read the changes recommended to make from previous post yet i cant see the JS working and i have no errors could somebody please tell me where im going wrong ? thanks
This example scenario changes the color of the text when the user has not inputted enough characters or too many characters i was also wondering if it would be possible to change the color of the text box to red also.

<script type="text/javascript">
                function checkForm()
                {
                    var username = document.getElementsById('username').value;
                    if(username.length<5)
                    {
                        alert("Username is to short");
                        return false;
                    }
                    else if (username.lenght<16)
                    {
                        alert("Username is to long");
                        return false;
                    }
                    else
                    {
                    return true;    
                    }

                }

                function checkUsername()
                {
                    var username = document.getElementsById('username').value;
                    var element = document.getElementsById('username1');
                    if(username.lenght<5)
                    {
                        element.innerHTML = "Username is to short";
                        element.style.color = "red";
                    }
                    else if (username.lenght>16)
                    {
                        element.innerHTML = "Username is to long";
                        element.style.color = "red";
                    }
                    else
                    {
                        element.innerHTML = "Valid Username";
                        element.style.color = "green";
                    }
                }

    </script>
        <p><b><h3>Welcome User Please Register</h3></b></p>
        <form action="registerUserProcess.php" id="registerUserForm" method="post" name="registerUserForm" onSubmit='return checkForm();'>

    <table> 
    <tr><td><label id="username1">Username</label></td><td><input id="username" type="text" size="16" onBlur='checkUsername();'/></td></tr>

Answer 1

Problem is with your labels. When you call document.getElementById('username'), js searches the document for id == username and it finds a label, not a textfield. Switch your label id to sth like label_username and add id='username' to you input definition.