SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Alert, but why?

  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Alert, but why?

    This launches an alert even when I enter in data into a form field. Happen to know why? Can I not use value.length?

    Code JavaScript:
    if (body.value.length === 0){
    	  	alert('geez');
    	  		show_error(body_msg, 'This field is required.');
    	  	}else if (body.value.match(/^[a-zA-Z]+$/) === null){
    	  		show_error(body_msg, 'Invalid name (letters only).');
    	  	}else{
    	  		removeChildren(body_msg);
    	  	}
    	  	return false;
    	  }

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    AFAIK the length property is for Arrays - body is not an array.

    Maybe
    string(body.innerHTML).length

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    body is not a good choice for an identifier, but the fact that you're getting to the alert, shows that body.value.length is defined. Perhaps you should post the entire form and validation function.
    Tab-indentation is a crime against humanity.

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Maybe you should use body_msg ??

    Logic Ali is right, seeing more code would help.

  5. #5
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    body is not a good choice for an identifier, but the fact that you're getting to the alert, shows that body.value.length is defined. Perhaps you should post the entire form and validation function.
    You asked for it...

    The onblur functions work great, to display the js errors, but I just can't get the errors to show up upon hitting submit. Well they show up when I edit the code but do not function properly. Often they will continuously add labels. I don't know if I should be repeating a lot of the same function for my addonload. I also don't know if I can put my validationForm() function in the addonload function.

    Code JavaScript:
    addOnload(function(){
     
    	// function to remove any old messages and show a new one
    	function show_error(label, msg){
    		removeChildren(label);
    		label.appendChild(document.createTextNode(msg));
    	}
     
    	// function to get the default error message container
    	function get_label(){
    		var error_container = document.createElement('label');
    		error_container.style.display = 'inline';
    		error_container.style.margin = '0 0 0 85px';
    		error_container.setAttribute('className', 'error');
    		error_container.setAttribute('class', 'error');
     
    		return error_container;
    	}
     
    	function get_label_body(){
    		var error_container = document.createElement('label');
    		error_container.style.display = 'inline';
    		error_container.style.margin = '5px 20px 0 0';
    		error_container.style.cssFloat = 'right';
    		error_container.style.styleFloat = 'right';
    		error_container.setAttribute('className', 'error');
    		error_container.setAttribute('class', 'error');
     
    		return error_container;
    	}
     
    	// duplicate the default
    	var fullname_msg	= get_label();
    	var email_msg 		= get_label();
    	var subject_msg 	= get_label();
    	var body_msg 		= get_label_body();
     
    	// get the input field elements
    	var fullname		= document.getElementById('fullname');
    	var email			= document.getElementById('email');
    	var subject			= document.getElementById('subject');
    	var body			= document.getElementById('body');
    	var messagesend 	= document.getElementById('messagesend');
     
    	// add the new message elements to the screen
    	fullname_msg.for = 'fullname';
    	fullname.parentNode.appendChild(fullname_msg);
     
    	email_msg.for = 'email';
    	email.parentNode.appendChild(email_msg);
     
    	subject_msg.for = 'subject';
    	subject.parentNode.appendChild(subject_msg);
     
    	body_msg.for = 'messagesend';
    	messagesend.parentNode.appendChild(body_msg);
     
    	fullname.onblur = function fullnamev(){
    		if (fullname.value.length === 0){
    			show_error(fullname_msg, 'This field is required.');
    		}else if (fullname.value.match(/^[a-zA-Z]+$/) === null){
    			show_error(fullname_msg, 'Invalid name (letters only).');
    		}else{
    			removeChildren(fullname_msg);
    		}
    	}
     
    	email.onblur = function emailv(){
    		if (email.value.length === 0){
    			show_error(email_msg, 'This field is required.');
    		}else if (email.value.match(/^[a-z0-9\-\.\_\+]{1,64}\@(?:[a-z0-9\-\_]+)\.(?:[a-z]{2,4}|[a-z]{2,3}\.[a-z]{2,3})$/) === null){
    			show_error(email_msg, 'Invalid e-mail address.');
    		}else{
    			removeChildren(email_msg);
    		}
    	}
     
    	subject.onblur = function subjectv(){
    		if (subject.value.length === 0){
    			show_error(subject_msg, 'This field is required.');
    		}else if (subject.value.match(/^[a-zA-Z]+$/) === null){
    			show_error(subject_msg, 'Invalid name (letters only).');
    		}else{
    			removeChildren(subject_msg);
    		}
    	}
     
    	body.onblur = function bodyv(){
    		if (body.value.length === 0){
    			show_error(body_msg, 'This field is required.');
    		}else if (body.value.match(/^[a-zA-Z]+$/) === null){
    			show_error(body_msg, 'Invalid name (letters only).');
    		}else{
    			removeChildren(body_msg);
    		}
    	}
     
    });
     
    function validateForm(){
     
    	var fullnameform 	= document.forms["contact"]["fullname"].value
    	var emailform		= document.forms["contact"]["email"].value
    	var subjectform	 	= document.forms["contact"]["subject"].value
    	var bodyform	 	= document.forms["contact"]["body"].value
     
    	// function to remove any old messages and show a new one
    	function show_error(label, msg){
    		removeChildren(label);
    		label.appendChild(document.createTextNode(msg));
    	}
     
    	// function to get the default error message container
    	function get_label(){
    		var error_container = document.createElement('label');
    		error_container.style.display = 'inline';
    		error_container.style.margin = '0 0 0 85px';
    		error_container.setAttribute('className', 'error');
    		error_container.setAttribute('class', 'error');
     
    		return error_container;
    	}
     
    	function get_label_body(){
    		var error_container = document.createElement('label');
    		error_container.style.display = 'inline';
    		error_container.style.margin = '5px 20px 0 0';
    		error_container.style.cssFloat = 'right';
    		error_container.style.styleFloat = 'right';
    		error_container.setAttribute('className', 'error');
    		error_container.setAttribute('class', 'error');
     
    		return error_container;
    	}
     
    	// duplicate the default
    	var fullname_msg	= get_label();
    	var email_msg 		= get_label();
    	var subject_msg 	= get_label();
    	var body_msg 		= get_label_body();
     
    	// get the input field elements
    	var fullname		= document.getElementById('fullname');
    	var email			= document.getElementById('email');
    	var subject			= document.getElementById('subject');
    	var body			= document.getElementById('body');
    	var messagesend 	= document.getElementById('messagesend');
     
    	// add the new message elements to the screen
    	fullname_msg.for = 'fullname';
    	fullname.parentNode.appendChild(fullname_msg);
     
    	email_msg.for = 'email';
    	email.parentNode.appendChild(email_msg);
     
    	subject_msg.for = 'subject';
    	subject.parentNode.appendChild(subject_msg);
     
    	body_msg.for = 'messagesend';
    	messagesend.parentNode.appendChild(body_msg);
     
    	if (fullnameform === null || fullnameform ==="" || emailform === null || emailform ==="" || subjectform === null || subjectform ==="" || bodyform === null || bodyform ==="")
    	  {
    	  	if (body.value.length === 0){
    	  	alert('geez');
    	  		show_error(body_msg, 'This field is required.');
    	  	}else if (body.value.match(/^[a-zA-Z]+$/) === null){
    	  		show_error(body_msg, 'Invalid name (letters only).');
    	  	}else{
    	  		removeChildren(body_msg);
    	  	}
    	  	return false;
    	  }
     
    }

    Code HTML4Strict:
    <form class="contact" method="post" action="contact.php" name="contact" onsubmit="return validateForm()">
    	<fieldset>
    		<div class="inner">
    			<div class="formElement">
    				<div class="formFieldLabel">
    					<label for="fullname" >Full name *</label>
    				</div>
    				<div class="formField">
    					<input id="fullname"  name="fullname" type="text" value="<?php if (isset($_POST['fullname'])){ echo $_POST['fullname']; } ?>"/>
    				</div>
    			</div>
    			<div class="formElement">
    				<div class="formFieldLabel">
    					<label for="email" >Email *</label>
    				</div>
    				<div class="formField">
    					<input id="email"  name="email" type="text" value="<?php if (isset($_POST['email'])){ echo $_POST['email']; } ?>"/>
    				</div>
    			</div>
    			<div class="formElement">
    				<div class="formFieldLabel">
    					<label for="subject" >Subject *</label>
    				</div>
    				<div class="formField">
    					<input id="subject" type="text" name="subject" value="<?php if (isset($_POST['subject'])){ echo $_POST['subject']; }?>"/>
    				</div>
    			</div>
    		<div>
    	</fieldset>
    	<fieldset class="textarea">
    		<div class="inner">
    			<textarea id="body" class="body" name="body"><?php if (isset($body)){ echo $body; } ?></textarea>
    		</div>
    	</fieldset>
    	<div id="submitmessage" class="mrs h25">
    		<input id="messagesend" name="messagesend" class="f_right" type="submit" value="Submit" />
    	</div>
    </form>

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unemployment View Post
    You asked for it...
    After adding the removeChildren function
    Code:
    function removeChildren( elem )
    {
     while( elem.firstChild )
      elem.parentnode.removeChild( elem.firstChild );  
    }
    which you didn't include, the alert does not appear if the textarea is not empty. It's not exactly the last word in validation but it works.

    I'm not getting involved in your element handling issues.
    Tab-indentation is a crime against humanity.


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
  •