i am making this form page where users input their first and last name as well as email address and phone number. i need a message to be placed next to each field (success if info it put in. ERROR if nothing is typed in)
now the question i have is how do i get my phone number field working and email? I need the phone number to have at least one dash so it will be valid and the email to have the @ symbol for it to be valid. how do i go about on doing this? i have this much done so far. someone please help


Code:
// JavaScript Document

function setupForm() {
				var fname_valid = false;	
				var lname_valid = false;
				var phone_valid = false;
				var email_valid = false;
				var url_valid = false;
				
				var check = document.createElement("img");
				check.setAttribute('src','img/check.jpg');
				
				var stop = document.createElement("img");
				stop.setAttribute('src','img/stop.jpg');
				
				document.myform.fname_name.onblur = function() {
					var fname = document.getElementById('fname');
					var span = fname.getElementsByTagName('span');
					if(this.value.length > 0) {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Success!'));
							fname_valid = true;	
						} 
						
						else {
							span[0].firstChild.nodeValue = "Success!";
							fname_valid = true;
						}
					} 
					
					else {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Error!'));
							fname_valid = false;	
						}
						
						else {
							span[0].firstChild.nodeValue = "Error!";
							fname_valid = false;
						}
					}
				}
				
				document.myform.fname_name.onfocus = function() {
					var fname = document.getElementById('fname');
					var span = fname.getElementsByTagName('span');
					span[0].firstChild.nodeValue = "Enter the Correct Text!";
				}
								
								
				// LAST NAME
				document.myform.lname_name.onblur = function() {
					var lname = document.getElementById('lname');
					var span = lname.getElementsByTagName('span');
					if(this.value.length > 0) {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Success!'));
							lname_valid = true;
						} 
						
						else {
							span[0].firstChild.nodeValue = "Success!";
							lname_valid = true;
						}
					} 
					
					else {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Error!'));
							lname_valid = false;
						}
						
						else {
							span[0].firstChild.nodeValue = "Error!";
							lname_valid = false;
						}
					}
				}

				
				document.myform.lname_name.onfocus = function() {
					var lname = document.getElementById('lname');
					var span = lname.getElementsByTagName('span');
					span[0].firstChild.nodeValue = "Enter the Correct Text!";
				}

				// PHONE NUMBER INFO

				function is_numeric(mixed_var){
					return (typeof(mixed_var) === 'number' || typeof(mixed_var) === 'string') && mixed_var !== '' && !isNaN(mixed_var);
				}
				
				function checkPhoneNumber(phoneNo) {
					var phoneRE = /^\d\d-\d\d\d\d\d\d\d\d$/;
					
					if (phoneNo.match(phoneRE)) {
						alert("YAY");
						return true;
					} 
					else {
						alert("NO");
						return false;
					}
				}

				document.myform.phone_name.onblur = function() {
					var phone = document.getElementById('phone');
					var span = phone.getElementsByTagName('span');
										
					if(checkPhoneNumber(phone_id.value)=true) {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Success!'));
							phone_valid = true;
						} 
						else {
							span[0].firstChild.nodeValue = "Success!";
							phone_valid = true;
						}
					} 
					else {
						if(span[0].firstChild.nodeValue == null) {
							span[0].appendChild(document.createTextNode('Error!'));
							phone_valid = false;
						}
						else {
							span[0].firstChild.nodeValue = "Error!";
							phone_valid = false;
						}
					}
				}

				document.myform.phone_name.onfocus = function() {
					var phone = document.getElementById('phone');
					var span = phone.getElementsByTagName('span');
					span[0].firstChild.nodeValue = "Enter the Correct Text!";
				}

				
				// EMAIL INFO
				function validate_email(field,alerttxt){
					with (field){
						apos=value.indexOf("@");
						dotpos=value.lastIndexOf(".");
						if (apos<1||dotpos-apos<2){
							alert(alerttxt);return false;
						}
						else {return true;}
					}
				}
								
				document.myform.onsubmit = function() {
					processForm(fname_valid, lname_valid);	
					return false;
				}
			}
			
			function processForm(fname_valid, lname_valid) {
				if(fname_valid && lname_valid) {		
					alert('inside processForm()');
					return false;
				} 
				
				else {	
					alert('something still is not valid');
					return false;
				}
			}
			
			

			



 

	window.onload = setupForm;

Code:
<body>
<form method="post" name="myform">

            <fieldset>
                <legend>User Information</legend>

				<div id="fname">
	                <label for="fname_id">First Name:</label><br/>
	                <input id="fname_id" type="text" name="fname_name" value="" />
                    <span />
				</div>
				<div id="lname">

	                <label for="lname_id">Last Name:</label><br/>

	                <input id="lname_id" type="text" name="lname_name" value="" />
                    <span />
				</div>
                
                 <div id="phone">

	                <label for="phone_id">Phone Number:</label><br/>
	                <input id="phone_id" type="text" name="phone_name" value="" />
                    <span />
				</div>

                
                <div id="email">

	                <label for="email_id">Email:</label><br/>
	                <input id="email_id" type="text" name="email_name" value="" />
                    <span />
				</div>
                
                <div id="url">

	                <label for="url_id">Sulley Address:</label><br/>

	                <input id="url_id" type="text" name="url_name" value="" />
                    <span />
				</div>
                
                <!--Questions for survey -->
                
                <fieldset><legend> Survey</legend>
<label for="question1">Do you drink alcohol?</label>
<input type="radio" name="question1" value="true" />True
<input type="radio" name="question1" value="false" />False <br/>

<label for="question2"> Do you have a DUI?</label>
<input type="radio" name="question2" value="true" />True
<input type="radio" name="question2" value="false" />False <br/>
</fieldset>
				
                
                
                <div id="submit">
	                <input id="submit" type="submit" name="submit" value="Click to Submit" />
				</div>
            </fieldset>
        </form>

</div>
</body>