JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old August 23rd, 2012, 08:27 AM
leej leej is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2012
Posts: 2 leej User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 m 13 sec
Reputation Power: 0
JS Form Validation with InnerHTML

I am creating a form and having trouble validating the fields the way I want.

Here is what I want to do.
  • 1. Validate entire form upon Submit button
  • 2. Use innerHTML with <div></div> when error on the form occurs (no alert boxes)
  • 3. Certain fields will only be "alpha", while others will only be "numeric", while others may contain both

Here is my code.
Code:
<html>
<head><title>Test</title>

<script language="javascript" type="text/javascript">

function all_fields(master_form)
{
/*	var errors = new Array();
	var valid  = true;
	var f = new Array();

	f[0] = "first";
	f[1] = "last";

	if(!alpha_field(master_form.f_first))
	{
		errors[0] = "Please enter first name (letters only)";
		valid = false;
	}
	else
	{
		errors[0] = "";
	}

	if(!alpha_field(master_form.f_last))
	{
		errors[1] = "Please enter last name (letters only)";
		valid = false;
	}
	else
	{
		errors[1] = "";
	}

	if(valid == false)
	{
		for(var i = 0; i < f.length; i++)
		{
			document.getElementById(f[i]).innerHTML = errors[i];
			document.getElementById(f[i]).style.display = 'block';
		}
		return valid;
	}
	else
	{
		return valid;
	}
*/
	var note = "";
	var f = new Array();

	f[0] = "first";
	f[1] = "last";

	note += alpha_field(master_form.f_first);
	note += alpha_field(master_form.f_last);

	if(note != "")
	{
		for(var i = 0; i < f.length; i++)
		{
			document.getElementById(f[i]).innerHTML = note;
			document.getElementById(f[i]).style.display = 'block';
		}
		return false;
	}
	return true;
}

function alpha_field(v)
{
	var legalChars	= /^[a-zA-Z]+$/;		// Only letters allowed
	//var condition	= true;
	var note = "";

	v.value = v.value.toUpperCase();

	if(v.value == "" || v.value.length == 0)
	{
		v.style.background = '#FF0000';
		v.focus();
		//condition = false;
		note = "Required Info";
	}
	else if(!legalChars.test(v.value))
	{
		v.style.background = '#FF0000';
		v.focus();
		//condition = false;
		note = "Only Letters";
	}
	else
	{
		v.style.background = '#FFFFFF';
	}
	//return condition;
	return note;
}

function numb_field()
{
	var legalchars	= "0123456789";			// Only numbers allowed
	var zip_code	= master_form.f_zip;
	var condition	= true;

	if(zip_code.value == "" || zip_code.value.length == 0)
	{
		zip_code.style.background = '#FF0000';
		document.getElementById('zip').innerHTML = "Enter Zip Code";
		document.getElementById('zip').style.display = 'block';
		zip_code.focus();
		condition = false;
	}

	for(var i = 0; i < zip_code.value.length && condition == true; i++)
	{
		var chk = zip_code.value.charAt(i);
		if(legalchars.indexOf(chk) == -1)
		{
			zip_code.style.background = '#FF0000';
			document.getElementById('zip').innerHTML = "Numbers Only";
			document.getElementById('zip').style.display = 'block';
			zip_code.focus();
			condition = false;
		}
	}
	return condition;
}

function v_caps(v)
{
	v.value = v.value.toUpperCase();
}

</script>

<style type="text/css">

.s {color: #FF0000; display: none;}

input:focus
{
	border: 1px solid #FFE213;
}

</style>

<head>

<body>

<form action="" name="master_form" onsubmit="return all_fields(this);">
<table border=1>
<tr>
<td>First Name:</td>
<td><input id="f_first" name="f_first" type="text" onkeyup="return v_caps(this);"></td>
<td><div class="s" id="first" name="first"></div></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input id="f_last" name="f_last" type="text"></td>
<td><div class="s" id="last" name="last"></div></td>
</tr>

<tr>
<td>Address:</td>
<td><input id="f_addy" name="f_addy" type="text"></td>
<td><div class="s" id="addy" name="addy"></div></td>
</tr>

<tr>
<td>City:</td>
<td><input id="f_city" name="f_city" type="text"></td>
<td><div class="s" id="city" name="city"></div></td>
</tr>

<tr>
<td>State:</td>
<td><input id="f_state" name="f_state" type="text"></td>
<td><div class="s" id="state" name="state"></div></td>
</tr>

<tr>
<td>Zip Code:</td>
<td><input id="f_zip" name="f_zip" type="text"></td>
<td><div class="s" id="zip" name="zip"></div></td>
</tr>

<tr>
<td colspan=3><input type="submit" value="Submit"></td>
</tr>
</table>
</form>

</body>
</html>


The commented part of the code (near the top) will do what I need, but it is tedious to have to do it for each field (my final form will have more fields than what I provided in this example; probably closer to 25+ fields).

Currently, I am trying to get it to work with just the "First" and "Last" name fields, so I know that the other fields do not work at this time. When I run this, I will get an error message twice for each field (First and Last in this case).
  • "First Name" and "Last Name" blank - displays "Required InfoRequired Info"
  • "First Name" with alpha characters and "Last Name" blank (or vice versa) - the field will turn "White" (as it should because it is valid), but will still display "Required Info"
  • "First Name" with numeric characters and "Last Name" blank (or vice versa) - displays "Only LettersRequired Info" for both fields; whereas, it should display "Only Letters" for "First Name" and "Required Info" for "Last Name"

I am open to any ideas or suggestions. Thanks in advance.

Reply With Quote
  #2  
Old August 24th, 2012, 10:16 AM
leej leej is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Aug 2012
Posts: 2 leej User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 17 m 13 sec
Reputation Power: 0
Quote:
Originally Posted by Lorrie447
Where are you doing this calculation - VBA, query, textbox?URLURLURLURLURLURL


I am not doing any type of calculations. I have a form that uses text boxes. Below are the text boxes that I am using as my test.

Code:
<tr>
<td>First Name:</td>
<td><input id="f_first" name="f_first" type="text" onkeyup="return v_caps(this);"></td>
<td><div class="s" id="first" name="first"></div></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input id="f_last" name="f_last" type="text"></td>
<td><div class="s" id="last" name="last"></div></td>
</tr>


What I am trying to do is give the user an error message by using innerHTML when they enter in an invalid character. For "First" and "Last" name, I only want alpha characters entered (if they enter any thing other than letters, it will display an error message next to the textbox).

The problem that I run into is that it displays the error message twice, even if my field is correct.

Reply With Quote
  #3  
Old October 23rd, 2013, 12:30 PM
vipin4u vipin4u is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Sep 2013
Posts: 8 vipin4u User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 29 m 10 sec
Reputation Power: 0
Try jQuery. It is much easier than this

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > JS Form Validation with InnerHTML


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap