Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-19-2010, 12:52 PM   PM User | #1
PumpkinPie76
New to the CF scene

 
Join Date: Dec 2010
Posts: 9
Thanks: 3
Thanked 0 Times in 0 Posts
PumpkinPie76 is an unknown quantity at this point
onblur clearing form

okay. clearing a form. I have a clear button. when I push it, I want all the red text boxes and onblur messages to disappear. anyone have an idea on where i can start?

heres javascript
Code:
function isFormValid() 
{	
	var userF = document.getElementById('FName').value;
	var userL = document.getElementById('LName').value;
	var userPW = document.getElementById('pw').value;
	var userPW2 = document.getElementById('pw2').value;
	var userBDay = document.getElementById('BDay').value;
	var userEmail = document.getElementById('email').value;
	var NameFormat = /^[A-Za-z]{2,12}$/;
	var PWFormat = /^[A-Za-z0-9]{6,12}$]/;
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	var retVal = true;
	var errorMsg = "";
	
	if (!NameFormat.test(userF))
		{
		assignErrorClass("FName");
		errorMsg = "First Name is required. 2-12 letters only\n";
		retVal = false;
		}
	if (!NameFormat.test(userL))
		{
		assignErrorClass("LName");
		errorMsg = errorMsg + "Last Name is required. 2-12 letters only\n"; 
		retVal = false;
		}
	if (!PWFormat.test(userPW))
		{
		assignErrorClass("pw");
		errorMsg = errorMsg + "Password is required. 6-12 letters or numbers only.\n";
		retVal = false;
		}
	if (userPW2 == "")
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Please Retype password.\n";
		retVal = false;
		}
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		assignErrorClass("pw2");
		errorMsg = errorMsg + "Passwords do not match.\n";
		retVal = false;
		}
	if (userBDay == "")
	{
		assignErrorClass("BDay");
		errorMsg = errorMsg + "Please Enter a Birthday.\n";
		retVal = false;
	}
	if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
			{
				assignErrorClass("BDay");
				errorMsg = errorMsg + "Incorrect Birthday format\n";
				retVal = false;
			}
	if (badBirthday("BDay") && (userBDay !== "")) {
		assignErrorClass("BDay");
		retVal = false;
		errorMsg = errorMsg + "Invalid Birthday\n";
		}
		
	if (userEmail == "")
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter an Email address.\n";
		retVal = false;
		}
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		assignErrorClass("email");
		errorMsg = errorMsg + "Please Enter a valid Email address.\n";
		retVal = false;
		}
	if (!retVal)
		{
		alert( errorMsg);
		}
	return retVal;
}
         
function assignErrorClass(objName) 
{
	var obj = document.getElementById(objName);
	obj.className = "err";
}
function badBirthday( objName) {
	var obj = document.getElementById(objName);
	var dateStr = obj.value;
	var mn = dateStr.split("/")[0];
	var dy = dateStr.split("/")[1];
	var yr = dateStr.split("/")[2];
	var dateObj = new Date(yr,mn-1,dy);  //JavaScript and PHP number the months 0 to 11.
	if (dateObj.getFullYear() != yr || dateObj.getMonth()+1 != mn || dateObj.getDate() != dy) {
		return true;
	} else {
		return false;
	}
	}
              
function checkFName()
{
	var userF = document.getElementById('FName').value;
	var elementF = document.getElementById('labelFName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userF))
		{
		elementF.innerHTML = "First Name is required. 2-12 letters only";
		elementF.style.color = "red";
		}
	else
		{
		elementF.innerHTML = "";
		elementF.style.color = "green"; 
		}
}

function checkLName()
{
	var userL = document.getElementById('LName').value;
	var elementL = document.getElementById('labelLName');
	var NameFormat = /^[A-Za-z]{2,12}$/;
	if (!NameFormat.test(userL))
		{
		elementL.innerHTML = "Last Name is required. 2-12 letters only";
		elementL.style.color = "red";
		}
	else
		{
		elementL.innerHTML = "";
		elementL.style.color = "green"; 
		}
}
function checkpw()
{
	var userPW = document.getElementById('pw').value;
	var elementPW = document.getElementById('labelpw');
	var PWFormat = /^[A-z0-9]{6,12}$/;
	if (!PWFormat.test(userPW))
		{
		elementPW.innerHTML = "Password is required. 6-12 letters or numbers only.";
		elementPW.style.color = "red";
		}
	else
		{
		elementPW.innerHTML = "Good Password";
		elementPW.style.color = "green"; 
		}
}
function checkpw2()
{
	var userPW2 = document.getElementById('pw2').value;
	var userPW = document.getElementById('pw').value;
	var elementPW2 = document.getElementById('labelpw2');
	if ((userPW != userPW2) && (userPW2 !== ""))
		{
		elementPW2.innerHTML = "Passwords do not match.";
		elementPW2.style.color = "red";
		}
	else if (userPW2 == "") 
		{
		elementPW2.innerHTML = "Please Retype password.";
		elementPW2.style.color = "red";
		}
	else
		{
		elementPW2.innerHTML = "Passwords Match";
		elementPW2.style.color = "green"; 
		}
}
function checkBDay()
{
	var userBDay = document.getElementById('BDay').value;
	var elementBDay = document.getElementById('labelBDay');
	var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
	if (userBDay == "")
		{
		elementBDay.innerHTML = "Please enter A Birthday.";
		elementBDay.style.color = "red";
		}
		else if ((!BDayFormat.test(userBDay)) && (userBDay !== "")) 
		{
			elementBDay.innerHTML = "Please enter mm/dd/yyyy format.";
			elementBDay.style.color = "red";
		}
		else if ((badBirthday("BDay")) && (userBDay !== ""))
		{
			elementBDay.innerHTML = "Please enter valid Birthday.";
			elementBDay.style.color = "red";
		}
	else
		{
		elementBDay.innerHTML = "";
		elementBDay.style.color = "green"; 
		}
}
function checkEmail()
{
	var userEmail = document.getElementById('email').value;
	var elementEmail = document.getElementById('labelEmail');
	var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
	if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
		{
		elementEmail.innerHTML = "Please enter a Valid Email address.";
		elementEmail.style.color = "red";
		}
	else if (userEmail == "") 
		{
		elementEmail.innerHTML = "Please enter an Email address.";
		elementEmail.style.color = "red";
		}
	else
		{
		elementEmail.innerHTML = "";
		elementEmail.style.color = "green"; 
		}
}
heres the html
Code:
<form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">

* First Name: <input type="text"  name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />



* Password: <input type="password" id="pw" name="Password" onblur="checkpw();"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />


I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />



I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />



My favorite element is:
	<select name="element" id="element">
    	<option value="">select</option>
		<option value="fire">Fire</option>
		<option value="earth">Earth</option>
		<option value="water">Water</option>
		<option value="air">Air</option>
	</select><br />



*Birthday: mm/dd/yyyy<input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br /> 



*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />


	<input type="submit" value="Submit" />
	<input type="reset" value="Clear" />

</form>
css i guess would be
Code:
.err {
	border: 2px solid #FF0000;}
#errMsg {
	font-size: 110%;
	color: #FF0000;}
super thanks!!!!!!
-pumpkin
PumpkinPie76 is offline   Reply With Quote
Old 12-19-2010, 01:37 PM   PM User | #2
Philip M
Supreme Master coder!

 
Philip M's Avatar
 
Join Date: Jun 2002
Location: London, England
Posts: 17,036
Thanks: 197
Thanked 2,411 Times in 2,389 Posts
Philip M has a spectacular aura aboutPhilip M has a spectacular aura aboutPhilip M has a spectacular aura about
<input type="button" value="Clear" onclick = "this.form.reset()" />

For more info see http://www.javascript-coder.com/java...reset-form.htm

"The world is made up of five basic elements. Earth, air, fire, water and bullsh*t". - Philip M's personal mantra
Philip M is offline   Reply With Quote
Old 12-20-2010, 07:07 AM   PM User | #3
PumpkinPie76
New to the CF scene

 
Join Date: Dec 2010
Posts: 9
Thanks: 3
Thanked 0 Times in 0 Posts
PumpkinPie76 is an unknown quantity at this point
im still lost as to adding the onblur functions to reset too. so far i got the red text boxes to reset.. the the onblur still stays.

the red text boxes were easy to call cuz its just an element, but for the onblur's i have an element for each function. does this mean ill have to stack? im so lost.
PumpkinPie76 is offline   Reply With Quote
Old 12-20-2010, 03:47 PM   PM User | #4
prasanthmj
Regular Coder

 
Join Date: Jul 2003
Posts: 117
Thanks: 0
Thanked 17 Times in 17 Posts
prasanthmj is an unknown quantity at this point
If there is a pattern for naming the error areas, it will be easier (for example, FName error in FName_err and LName in LName_err) then you can iterate through the elements in the form and make the id of the error area of each element and clear it (document.getElementById(element_id+'_err').innerHTML = "")
prasanthmj is offline   Reply With Quote
Reply

Bookmarks

Tags
clear, form, onblur

Jump To Top of Thread


Thread Tools
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

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 09:55 AM.


Advertisement
Log in to turn off these ads.