Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <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

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Posts
    117
    Thanks
    0
    Thanked 17 Times in 17 Posts
    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 = "")


  •  

    Tags for this Thread

    Posting Permissions

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