Member Avatar for dmmajorstudent

How do i create a phone number form box in javascript using no inner html . there must be at least one dash in it.


this is my div for the phone number

<body>
<div id="wrapper" class="grid_12">

<div id="header" class="grid_8"> Take a Survey </div>

<div class="clear"></div>

<form method="post" name="myform">

<fieldset class="grid_4">
<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>

  • 3 Contributors
  • 3 Replies
  • 180 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by dmmajorstudent
Member Avatar for Graphix

Well, I don't quite know what you don't understand, neither do I know why you should use innerHTML when creating a input in which you can enter your phonenumber.

Try the following?

<script type="text/javascript">
  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$/;  // This matches XX-XXXXXXXX (e.g. 06-12345678)
 if (phoneNo.match(phoneRE)) {  
   alert("The phone number is valid!");
   return true;  
 } else {  
   alert("The phone number entered is invalid!");  
   return false;  
 }  
}
</script>
Enter your phonenumber below:<br />
<input type="text" id="phonenumber" name="phonenumber" maxlength="50" onchange="checkPhoneNumber(this.value)" />

~G

Member Avatar for java..

simply using indexOf('-') FUNCTION....

Member Avatar for dmmajorstudent

alright this is what i have so far. the phone number field does not work neither does the email. how do i get the phone number field to work where the user inputs at least ONE dash? so for example the number can be 123123-1234 or even 123-123-1234
also how do i get the email to validate with the @ symbol?

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;
<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>
Edited by dmmajorstudent because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.