Question

I have created an HTML form in which there are a number of different text boxes. What I want to do is to create a javascript script that will display little images next to the boxes that have no text in them. Here is an example of what I want to do:

At the moment I have created the following script which validates the form as I’d like, however it only displays a popup box since I don’t know how to display images/text. Here is the code I have:

    <script type="text/javascript">
    function validateForm()
    {
        var x=document.forms["email_form"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter your name in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["email"].value;
        if (x==null || x=="")
        {
            alert("Please enter your e-mail address in the box provided.");
            return false;
        }

        var x=document.forms["message-title"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter a message title in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["message"].value;
        if (x==null || x=="")
        {
            alert("Please enter your message in the box provided.");
            return false;
        }
    }
    </script>

Please can someone point me in the right direction?

Answer 1

You can have the error image elements next to the input elements but have the display property to hidden in css. you can have an id for each error image linked to their input element. for e.g. for email input, have and img element besides it. Have an initial css like this ->

#email_form img{
    display: none;
}

and then in your javascript, simply display the hidden image –

    var x=document.forms["email_form"]["email"].value;
    if (x==null || x=="")
    {
        var error_image = document.getElementById('error_email');
        error_image.style.display = 'inline';
        alert("Please enter your e-mail address in the box provided.");
        return false;
    }