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

StackOverflow https://stackoverflow.com/questions/17089544

Question

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?

Was it helpful?

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.

OTHER TIPS

I'm afraid you have to rethink the whole validation code. Next is happening:

  1. User inputs "First Name"
  2. Script iterates through input array
  3. round1: is fname OK --> yes, next i
  4. round2: is lname OK --> no, show alert
  5. round3: is email1 OK --> no, show alert ...

When this is iterated and the user finally can input the next field, the above loop is executed again, though there will be one alert less per each new loop.

A simple fix would be something like this:

function Validate(id) {
    var errors = {
        fname: 'enter you first name',
        lname: 'enter your last name',
        email1: 'enter your email address',
        email2: 'enter your email address',
        message: 'write your message'
    };
    if (document.getElementById(id).value === '') {
        if (id in errors) {
            alert(errors[id]);
        }
    }
    return;
}

In HTML just pass the corresponding id to Validate():

<input class="input" type="text"  name="fname" id="fname" onblur="Validate('fname')" />

However, I'd find this annoying behavior. It would be more comfortable, if you made the validation on submit, and cancel submit, if there are empty fields.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top