Search code examples
javascripthtmlformsfunctiononblur

'onblur' event, iterating through all the fields of a form, without giving the user a chance to enter data

I am in the process of writing a contact form. I have two JavaScript functions in the head (I will move them later, but that is another question).

The first function, Validate(), for the onblur event works, but not as I'd like it to. The second function, formValidate(), for the onsubmit event works.

I have a switch statement in a JavaScript function to use in an HTML onblur event.

The JavaScript code:

<head>
    <script type="text/javascript">
        function Validate()
        {
            // Create array containing textbox elements
            var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];

            // Loop through each element to see if value is empty
            for (var i = 0; i<input.length; i++)
            {
                if (input[i].value == '')
                {
                    switch( input[i].id){
                        case 'fname':
                        alert ('enter you first name');
                        break;

                        case 'lname' :
                        alert ('enter your last name');
                        break;

                        case 'email1':
                        alert ('enter your email address');
                        break;

                        case 'email2':
                        alert ('enter your email address');
                        break;

                        case 'message':
                        alert ('write your message');
                        break;
                    }
                }
            }
        }

        function formValidate()
        {
            // Create array containing textbox elements
            var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
            var error;

            // Loop through each element to see if value is empty.
            for(var i = 0; i<inputs.length; i++)
            {
                if(inputs[i].value == '')
                {
                    error = 'Please complete all fields.';
                    alert(error);
                    return false;
                }
            }
        }
    </script>
</head>

The HTML:

<form onsubmit="return formValidate()"  action="mailto:admin@sfasc.com.au" method="post"  id="contactForm" >
    <fieldset>
        <dl>
            <dt> First Name:</dt>
            <dd>
              <input class="input" type="text"  name="fname" id="fname" onblur="Validate()" />
            </dd>
            <dt> Last Name:</dt>
            <dd>
              <input class="input" type="text"  name="lname" id="lname" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email1"  id="email1" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email2"  id="email2" onblur="Validate()"/>
            </dd>
            <dt> Message:</dt>
            <dd>
              <textarea  name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
            </dd>
            <dd>
              <input type="submit" value="submit" name="submit"  />
            </dd>
        </dl>
    </fieldset>
</form>

The code works, except for this: When I click on a field, I get the following alert:

JavaScript alert

If I click, prevent pop ups, the alerts stop entirely. If I click OK, it goes to the next field, eg from fname to lname, and continues through the fields, preventing the user from entering any data.

How do I fix this problem?

Solution

  • I think this is what you want:

    Demo

    Instead of validating all inputs onblur, just validate the one that left focus. To do that I have passed in the element to Validate(this) in the HTML inline code. You also had some element ID issues (e.g. no message field). I also added a .focus() call to keep the input in focus if it's invalid.

    function Validate(elem) {
    // create array containing textbox elements
    var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];

    for (var i = 0; i < input.length; i++)
    // loop through each element to see if value is empty
    {
        if (input[i].value == '' && elem.id == input[i].id) {
            switch (input[i].id) {

                case 'fname':
                    alert('enter you first name');
                    break;
                case 'lname':
                    alert('enter your last name');
                    break;
                case 'email1':
                    alert('enter your email address');
                    break;
                case 'email2':
                    alert('enter your email address');
                    break;
                case 'message':
                    alert('write your message');
                    break;
            }

            elem.focus();
        }
    }
}

    I have to say though that lots of alert()'s are pretty nasty, it would be much better if you show a span next to each textbox with the error message instead.