SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Contact Form Errors:

    I'm probably overdosing the js again but I can't get the ids or values of elements I loop through when using get elements by class name. I'm trying to write the info to string variable then write the string to inner html. I got it to work with form 0 elements loop but can't get id or value with tags looped by class name. Repeat, Repeat
    External.js
    Code:
    //-----------------------------#contact--------------------------//
    
    var contact=document.getElementById('contact');
    addEvent(contact,'submit',function(){check();},false);
    
    function check(){
    var requierd=document.getElementsByClassName('requierd');
    var firstname=requierd[0];
    var lastname=requierd[1];
    var company=requierd[2];
    var email=requierd[3];
    var message=requierd[4];
    alert(requierd[0].id);//alerts 'firstname'
    var gloria=document.getElementById('gloria');
    str = 'Contact Form Errors:<br />'
    for (i = 0; i < requierd.lenth; i++) 
    str += requierd[i].id.toUpperCase() +': '+requierd[i].value + '<br />'
    gloria.innerHTML=str;//Reads 'Contact Form Errors:'
    alert(str);//Reads 'Contact Form Errors:<br />'
    }
    Of course I have a long way to go before I can add return values of true and false to make it a real validator but I need the 'str' to work. Please let me know if I am way wrong!

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The correct class name would be "required", which you might want to correct at some point but, if it's working, don't worry about until you've fixed your issue.

    Though I believe your issue is:
    PHP Code:
    for (0requierd.lenthi++) 
    It's spelt "length"; 'lenth' won't be a property, therefore it won't iterate.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Thanks Jake Bug eyed as I am I did notice the 'lenth' so I'll do a spell check though I'm sure the class = has the same spelling error I'll check it out to be sure. Yeah I miss spelled it all the way through so it shouldn't be a problem. Wierd, I thought I had used word to spell check that.
    Done. Now alert required 0 id is firing null! so I guess you can't get the id of an element you got by class name index? Wierd, developer tools lists the id of each element found so there must be a way to use var firstname equals reqired 0 var second equals required 1 etc. to put into an array say array required then get the id and value of each to str to put in inner html?
    EG.
    Code:
    var contact=document.getElementById('contact');
    addEvent(contact,'submit',function(){check();},false);
    
    function check(){
    var required=document.getElementsByClassName('required ');
    var firstname=required[0];
    var lastname=required[1];
    var company=required[2];
    var email=required[3];
    var message=required[4];
    var required=required[firstname,lastname,company,email,message];//no!
    var gloria=document.getElementById('gloria');
    str='Contact Form Errors:<br />'
    for(i = 0; i < required; i++)//length returns null 
    str+=required[i].id.toUpperCase() +': '+required[i].value + '<br />'
    gloria.innerHTML=str;//Reads 'Contact Form Errors:'
    alert(str);//Reads 'Contact Form Errors:<br />'
    }
    Wow it's not working on the array

  4. #4
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Did you replace the class name in the HTML? :P

    Ok so what I've done is rewritten the code to be a little more functional. Does it work for you?
    Code javascript:
    function check(){
    	var required=document.getElementsByClassName('required');
    	var errors = new Array();
    	for(i in required){
    		if(required[i].value.length == 0){
    			errors.push(required[i].id);
    		}
    	}
    	if(errors.length > 0){
    		var gloria = document.getElementById('gloria');
    		var error = "You have some empty fields to fill in:";
    		error += "<ul>";
    		for(i in errors){
    			error += "<li>" + errors[i] + "</li>";
    		}
    		error += "</ul>";
    		gloria.innerHTML = error;
    	}
    }
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jake The old lady is barking at me now, have to check it out tomorrow. Will let you know. Thanks for the responce. Sorry about my dislexia. Hasta la manyana

  6. #6
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Don't worry about spelling, I was exactly the same once - I wrote down every programming error I made due to spelling mistakes and made myself type them out in notepad, with word wrap on, until the screen was full. I'd get the hang of it by the end What a fun time of my life THAT was :P

    The above code doesn't quite work, my JS skills are too rusty nowadays. However this works:
    Code javascript:
    <html>
    	<head>
    		<script type="text/javascript">
    			function check(){
    				var required=document.getElementsByClassName('required');
    				var errors = new Array();
    				for(i = 0; i < required.length; i++){
    					if(required[i].value.length == 0){
    						errors.push(required[i].id);
    					}
    				}
    				if(errors.length > 0){
    					var gloria = document.getElementById('gloria');
    					var error = "You have some empty fields to fill in:";
    					error += "<ul>";
    					for(i = 0; i < errors.length; i++){
    						error += "<li>" + errors[i] + "</li>";
    					}
    					error += "</ul>";
    					gloria.innerHTML = error;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<form>
    			<input type="text" class="required" id="steve" />
    			<input type="text" class="required" id="dave" />
    			<input type="text" class="required" id="jimmy" />
    		</form>
    		<button onClick="check()">Check</button>
    		<div id="gloria"></div>
    	</body>
    </html>
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Wow JAKE that works and I'm trying to understand why the required i value length and required i id work in yours and I can only see that there is one thing missing in my original script 'required i value length' being declared. Thanks though. It works great and now I have to get the form to stop posting when there is a ul created. Will post back with final script. Muchos Mas Gracias a Te.

  8. #8
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To do that, just return false in the form handling. If a function tied to your form's submission returns false, it should prevent it from submitting (unless the user has JS off of course)
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Contact Form Errors:

    Roger that last comment Jake Arkinstall just realized that mailto is the exception to that rule in IE8 anyway and will always post allowing you to confirm or deny so I had to disable the submit button untill the form was complete. Thanks again for all your help.


Bookmarks

Posting Permissions

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