Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Help with Html/JavaScript form, i don't mean to rush but i'm really stuck here

    Okay this is for my final portfolio and i have one problem. When the user enters an inavlid phone number name or email an error message should pop up but its not working, any help would be use full. Thanks

    Here is my html part of it .


    Code:
     
    <!DOCTYPE html>
    <!--
    	
    	since: 14/12/2013
    	
    	Purpose: a contact form for the user to enter, 
    			it will display error messages if the information entered is invalid
    			
    	Page information. Please open contact.js to see the JavaScript function that work as validation. 		
    -->
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title> Contact form </title>
    		<style>
    		input {
    			margin:10px;
    		}
    		.errorStyle {
    			background-color:#FF0909;
    			padding:5px;
    			border:1px solid;
    			color:white;			
    		}
    		#container {
    			width:900px;
    			background-color: #4E6645;
    			color:white;
    		}
    		</style>
    	</head>
    	<!-- links to contact.js for the functionality of the page -->
    	<script src="contact.js" type="text/javascript" ></script>
    	<!-- Displays the following message to the user if they do not have JavaScript turned on-->
    		<noscript>
    			Please enable JavaScript, otherwise this page will not work
    		</noscript>
    	<!-- The contact form, with first and last name, phone number and email, all of which have validation on the contact.js page-->
    	<body>
    		<div id="container">
    			<fieldset>
    				<legend>Contact Form</legend>
    				<form id="contactForm">
    				<!-- All of the below have place holders so the user knows exactly what to enter and where-->
    					First Name <input type="text" id="firstName" onblur="checkNames(this)" placeholder="Olivier " />
    					Last Name <input type="text" id="lastName" onblur="checkNames(this)" placeholder="Wagemakers"/>
    					<span id="textError" style="margin-left:10px;"></span><br />
    					Phone Number <input type="tel" id="phone" onblur="checkPhone()" placeholder="9026582169"/>
    					<span id="phoneError" style="margin-left:10px;"></span><br />
    					E-mail address <input type="text" id="email" onblur="checkEmail()" placeholder="olivier.wagemakers@gmail.com"/>
    					<span id="emailError" style="margin-left:10px;"></span><br />
    					<!-- Places a note at the bottom to tell the user to overlook their information one last time even though the error messages will prompt them to change any mistakes-->
    					<input type="reset" value="Reset"><br>
    					<p>Note: Please make sure your details and information are correct</p>
    				</form>
    			</fieldset>
    		</div>
    	</body>
    </html>

    and the JavaScript part


    }
    Code:
    // Since: 14/12/2013
    // Purpose: The functionality part of the contact.html page
    	
    	
    		//This function checks the entries of firstName and lastName
    		//Also ensures that when a name is entered it must be more then 1 letter long
    		function checkNames(elem) {
    			var nameVal = document.getElementById(elem.id).value;
    			//checks for a name entered in the firstName section and lastName section
    			//if the name entered is not longer then 1 letter a error message pops up
    			if (nameVal.length < 1) {
    				document.getElementById("textError").innerHTML = "<span class='errorStyle'>You must enter your first and last name.</span>";	
    			} else {
    				document.getElementById("textError").innerHTML = "";
    			}
    		}
    		
    		//this function check if the user has entered a phone number, if no phone number is entered a error message will pop-up
    		// when the user enters a phone number it will validate it and if it is shorter then 10 digits another error message pops up.
    		// also if the phone number bar is entered with words or letters, anything other then numbers, an error message pops up
    			function checkPhone() {
    			var phoneVal = document.getElementById("phone").value;
    			// checks if the phone number is all numbers
    			// if no then it displays the following
    			if (isNaN(phoneVal)) {
    				document.getElementById("phoneError").innerHTML = "<span class='errorStyle'>Invalid entry, the phone number must be a number</span>";	
    			// checks if the phone number entered is 10 digits
    			// if not then the following message is displayed
    			} else if (phoneVal.length < 10) {
    				document.getElementById("phoneError").innerHTML = "<span class='errorStyle'>Invalid entry, the phone number must be a 10 digit phone number</span>";
    			} else {
    				document.getElementById("phoneError").innerHTML = "";
    			}
    		}
    		
    		// This function checks validates the e-mail
    		// If the user does not enter a correct email, emailError will pop up
    		// note this email verification is borrowed idea from http://www.w3schools.com/js/js_form_validation.asp
    			function checkEmail(){
    			var emailVal = document.getElementById("email").value;
    			//ensure that there is an at sign in the email
    			var atpos = emailVal.indexOf("@");
    			// ensures that a period is placed in the email which come after the at sign
    			var dotpos = emailVal.lastIndexOf(".com");
    			if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length){
    			document.getElementById("emailError").innerHTML = "";
    			} else {
    			document.getElementById("emailError").innerHTML = "<span class='errorStyle'>Invalid entry, there is a '@' sign missing or a '.com' missing</span>";

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    You would improve your chances of gaining assistance if you used the word "please". Have you tried using your error console?

    Suggest you add some alerts at strategic intervals to inspect the values at that point. Test one function at a time. Look especially at the missing closing braces } in the function checkEmail().

    Your email validation is very primitive and is barely worth including. It cannot detect typos. Not all email addresses end in .com. A better idea is to ask the user to enter his email address twice and check that the two match.

    if (nameVal.length < 1) { // What if the user enters a single space, a ? or a number? A proper name may only contain letters, space, hyphen and/or apostrophe. Mary-Lou O'Grady

    Lot's wife was a pillar of salt by day, but a ball of fire by night.
    - Pupil's answer to Catholic Elementary School test.
    Last edited by Philip M; 12-15-2013 at 11:37 AM. Reason: typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •