having problems validating various fields with ajax

[svgmx5]

hey everyone, i just started to mess around with ajax. I've been trying to validate various fields with out refresing the browser in a form i have.

 

I've got 5 fields, all 5 are validated using php, but instead of the user clicking the submit and finding out that their email or zip code is invalid i just want them to find out right after they type it.

 

So far I've managed to get the script i have to work with only one field. I can't get it to work with more than 1, which is why im here, hopefully someone can help me with it.

 

Anyway here is the form i have....

 

<form method="post" action="form2.php">
    	<input type="hidden" name="ip" value="'.$ip.'"/>
        <div class="inputBox">
            <p class="label">First Name:</p>
            <div class="inputBoxBg">
              <input type="text" name="fname" class="inputMainBox" />
            </div>
        </div>
        <div class="inputBox">
            <p class="label">Last Name:</p>
            <div class="inputBoxBg">
                <input type="text" name="lname" class="inputMainBox" />
            </div>
        </div>
        <div class="inputBoxRequired">
            <p class="label">Phone:</p>
            <div class="inputBoxBg">
                <input type="text" name="phone" class="inputMainBox" onchange="check_phone(this.form.phone.value);"  />
            </div>
		<p id="required_phone"></p>
	</div>
        <div class="inputBoxRequired">
            <p class="label">Zip Code:</p>
            <div class="inputBoxBg">
                <input type="text" name="zip" class="inputMainBox" onchange="check_zip(this.form.zip.value);"  />
            </div>
		<p id="required_phone"></p>
        </div>
        <div class="inputBoxRequired">
            <p class="label">Email:</p>
            <div class="inputBoxBg">
                <input type="text" name="email" class="inputMainBox" onchange="check_email(this.form.email.value);" />
            </div>
		<p id="required_phone"></p>
        </div>
        <div class="selectInputBox">
        	<p class="label">How Did You Hear about American Boxing?:</p>
            	<select name="heard" class="dropDownMen">
                	<option name="choose">Select One</option>
				<option name="flyers">Flyers</option>
				<option name="wom">Word of Mouth</option>
				<option name="google">Google</option>
				<option name="driveby">Drive By</option>
				<option name="yahoo">Yahoo</option>
				<option name="facebook">Facebook</option>
				<option name="twitter">Twitter</option>
				<option name="StreetSign">Street Sign</option>
				<option name="otherSE">Other Search Engine</option>
			</select>
		<p id="required_drop"></p>
        </div>
        <div class="inputBoxRequired">
            <p class="label">Whats 2 + 2:</p>
            <div class="inputBoxBg">
                <input type="text" name="question" class="inputMainBox" />
            </div>
		<p id="required_question"></p>
        </div>
        <div class="textAreaInput">
        	<p class="label">Tell us your goals:</p>
            <p class="maxTxtWarning">Max 200 Words</p>
            <div class="textAreaBgBox">
              <textarea name="message" cols="50" rows="8" class="textareaInputBox"></textarea>
            </div>
        </div>
        <div class="submitBtnInput">
        	<div class="submitBtnBg">
            	<input type="submit" name="singup" value="Sign Up" />
            </div>
        </div>
    </form>

 

and here is the JS code i have

 

function check_phone(phone){
if(ajax){
	ajax.open('get', 'veryPhone.php?phone=' + encodeURIComponent(phone));


	ajax.onreadystatechange = handle_check;


	ajax.send(null);
}
}

function check_zip(zip){
if(ajax){
	ajax.open('get', 'valizip.php?zip=' + encodeURIComponent(zip));


	ajax.onreadystatechange = handle_check;


	ajax.send(null);
}
}

function check_email(email){
if(ajax){
	ajax.open('get', 'validator.php?email=' + encodeURIComponent(email));


	ajax.onreadystatechange = handle_check;


	ajax.send(null);
}
}


function handle_check() {

if ( (ajax.readyState == 4) && (ajax.status == 200) ) {

	document.getElementById('required_phone').innerHTML = ajax.responseText;

}
} 

 

Finally here is another sniped of code in a different file

 

var ajax = false;

if (window.XMLHttpRequest) {


ajax = new XMLHttpRequest();

} else if (window.ActiveXObject) { 


try {
	ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) { 
	try {
		ajax = new ActiveXObject("Microsoft.XMLHTTP");
	} catch (e2) { }
}

}

if (!ajax) {
alert ('Some page functionality is unavailable.');
}

 

like i said i'm new to ajax, and i'm pretty sure what i'm doing is completely wrong, but i'm hoping someone here can guide me and help me out

 

Thanks!