A Switch Within A Javascript Function

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

Question

I am in the process of writing a contact form.

I have two Javascript functions in the head (will move them later, but that is another question).

The first function, Validate(), for the onblur event is not working. The second function, formValidate(), for the onsubmit event works.

I want to use a switch statement in a javascript function to use in an html onblur event.

The Javascript:

<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')];

               for(var i = 0; i<input.length; i++)
            // loop through each element to see if value is empty
            {
                if(input[i].value == '')
                {
                        switch (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;

            for(var i = 0; i<inputs.length; i++)
            // loop through each element to see if value is empty
            {
                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>

I have tried removing the second function, but it makes no difference. I am only learning.

Can anyone, please, tell me what I've done wrong?

Was it helpful?

Solution

This won't work, ID is not defined anywhere:

switch (ID) {

You should replace it with this:

switch(input[i].id) {

You should do some debugging, the error would surely appear in the console!

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