This launches an alert even when I enter in data into a form field. Happen to know why? Can I not use value.length?
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;
}
AFAIK the length property is for Arrays - body is not an array.
Maybe
string(body.innerHTML).length
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.
Maybe you should use body_msg ??
Logic Ali is right, seeing more code would help.
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.
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;
}
}
<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>
After adding the removeChildren function
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.