Form validation help

[Minoli Jayaward]

For my class activity(home work) I need validate a form which has several fields. I have created the form (html) and wrote some codes for validation. I want all my form fields display help text when they get focused and when the user enter invalid data display error text(not alert). All my help text are working. but error text are not. I wrote on focus and on blur events and functions for each field. But every time I preview it on IE I am getting "object expected error" I carefully checked all the element Id and those are okay. Please help me.


function myFocusHandler(e) {
var newClassName;
var eventTarget;
if (e.target) {
eventTarget = e.target;
} else if (e.srcElement) {
eventTarget = e.srcElement;
} else {
eventTarget = window.event.srcElement;
}

if (e.type == "focus" ) {
newClassName = "helpshow";
eventTarget.className = 'inputfocus';
} else if (e.type == "blur" ) {
newClassName = "helphide";

eventTarget.className = 'inputblur';
}

var relatedSpansId = eventTarget.id + "help";
document.getElementById(relatedSpansId).className = newClassName;
}

function errorshow(elementId) {

var relatedSpansId = elementId + "error";
document.getElementById(relatedSpansId).className = "errorshow";

function hideError(elementId) {
var relatedSpansId= elementId + "error";
document.getElementById(relatedSpansId).className = "errorhide";
}




function validateAllFields() {
var isemailOK = false;
var isformValid = true;
var email=document.getElementById("email");
IsemailOK=IsemailValid();
if (IsemailOK == false) {
formIsValid = false;
errorshow("email");
} else {
errorhide("email");
}

return formIsValid;
}

function isemailValid() {
var emailIsValid=false;
var emailElement;
var emailValue;
emailElement = document.getElementById("email");
emailValue = emailElement.value;
if (emaiValue== "/^[0-9A-Za-z\.\-_]+@([0-9A-Za-z\-_]+\.)+[A-Za-z]{2,}$/") {
emailIsValid=true;
}else{
emailIsValid=false;
}
return emailIsValid;


function validateemail(event) {
myFocusHnadler(event);
var isemailOK = false;
isemailOK=isemailValid();
if(emailOK == false) {
errorshow("email");
}else{
erroehide("email");
}
}






[Philip M]

There are several spelling errors/typos:-

myFocusHnadler(event);
erroehide("email");
errorhide("email"); - but the function called is named hideError



It is your responsibility to die() if necessary….. - PHP Manual

[Minoli Jayaward]

Thanks Master Coder

Corrected all the spelling errors, still the same problem. Don't let the beginners die...

Minoli

[Philip M]

if (emaiValue
Did you catch that one?

IsemailOK=IsemailValid();
And that? Javascript is case-sensitive.

Unless you show your HTML is is hard for anyone to test run your code.

[Minoli Jayaward]

Thanks Philip,

I got it all correct, validated email, help text working, error messages are working, I did one function to count words in the comment area and limit characters to 500. When the user starts to enter characters, the character count starts. it is working too. very happy, but if the user deletes any character it does not reduce the number. Now I am working on it.(trying).

I want to write code for this problem now. In a drop down list to select title,like Dr. Mr. Prof, or other. If a user selects "other" additional text box should appear to enter other title. (I need this only user selects "other" text box should be shown otherwise.) Can you lead me to there ? Drop down list is okay. I can manage it. Please do not ask me to die.

Thanks

[Philip M]

Here you are.

<form>
<select name = "title" onchange = "showbox()">
<option value = "">Select Title</option>
<option value = "Mr">Mr</option>
<option value = "Ms">Ms</option>
<option value = "Dr">Dr</option>
<option value = "Prof">Prof</option>
<option value = "Other">Other</option>
</select>

<div id = "otherTitle" style="display:none">
Enter your title <input type = "text" name = "OT">
</div>
</form>

<script type = "text/javascript">
function showbox() {
document.getElementById("otherTitle").style.display="none";  // remove the element
var val = document.forms[0].title.selectedIndex;
if (val == 5) {  // if Other selected
document.getElementById("otherTitle").style.display="block";  // display the element
}
}
</script>

[Minoli Jayaward]

Wow..Master Philip;

Many thanks for your valuable time spent in solving my problems and blessings for your coding journey. I want to be someone like you. I am trying really hard to understand the basics of coding and I love it. Thanks again.

[Minoli Jayaward]

Wow..Master Philip;

Many thanks for your valuable time spent in solving my problems and blessings for your coding journey. I want to be someone like you. I am trying really hard to understand the basics of coding and I love it. Thanks again.

[Minoli Jayaward]

Hi Philip;

I need help again please.I have three phone numbers to validate. (home, work and mobile) I have validated them with a regular expression (using pattern). they are working. Now I need another function (validation) to validate if the user has entered at least one phone number. Can I do this with regEx at the same time or do I need another function. Please help me. Also please advise me how to block (disable) one field if there are two. I want the user to allow entry in one and only. (Eg. if there is a home address and work address, I want the user to enter either homeAdd or Workadd )

Many Thanks (Do I need to post this as a new thread ? Sorry..)

My code for the phone Numbers

<script type="text/javascript">

function validateAllFields() {
		var ishomenumberOK = false; 
		var isworknumberOK = false;
		var ismobilenumberOK=false;
		
		var formIsValid = true; 
		
		
		ishomenumberOK = ishomenumberValid();
		isworknumberOK = isworknumberValid();
		ismobilenumberOK =ismobilenumberValid();
		
		
		if (ishomenumberOK == false) {
			formIsValid = false;
			showError("homenumber");
		} else {
			hideError("homenumber");
		}
		
	//----------------------------------------------------------------
	if (isworknumberOK == false) {
			formIsValid = false;
			showError("workenumber");
		} else {
			hideError("worknumber");
		}
		
	
	
//---------------------------------------------------------------------	
	if (ismobilenumberOK == false) {
			formIsValid = false;
			showError("mobilenumber");
		} else {
			hideError("mobilenumber");
		}
		return formIsValid;
	}
	
</script>		
	
//------------------------------------------------------------------
	
		function ishomenumberValid() {
		var homenumberIsValid = false;
		var homenumberElement;
		var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
		var homenumberElement = document.getElementById("homenumber");
			
			if (pattern.test (homenumberElement.value) ){  
			homenumberIsValid = true;
			} else {
			homenumberIsValid = false;
		}
			
		return homenumberIsValid;
	}
//-----------------------------------------------------------------
		function isworknumberValid() {
		var worknumberIsValid = false;
		var worknumberElement;
		var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
		var worknumberElement = document.getElementById("worknumber");
			
			if (pattern.test (worknumberElement.value) ){  
			worknumberIsValid = true;
			} else {
			worknumberIsValid = false;
		}
			
		return worknumberIsValid;
	}

//-------------------------------------------------------------
	function ismobilenumberValid() {
		var mobilenumberIsValid = false;
		var mobilenumberElement;
		var pattern =/^([\(\) -]*[0-9][\(\) -]*){10}$/g;
		var mobilenumberElement = document.getElementById("mobilenumber");
			
			if (pattern.test (mobilenumberElement.value) ){  
			mobilenumberIsValid = true;
			} else {
			mobilenumberIsValid = false;
		}
			
		return mobilenumberIsValid;
	}

//----------------------------------------------------------------

	function validatehomenumberField(event) {
			 myFocusHandler(event);

			var ishomenumberlOK = false; 

			ishomenumberOK = ishomenumberValid();
			if (ishomenumberOK == false) {
			showError("homenumber");
			} else {
			hideError("homenumber");
		}
	}
	
	
//------------------------------------------------------------	
	function validateworknumberField(event) {
			 myFocusHandler(event);

			var isworknumberlOK = false; 
			isworknumberOK = isworknumberValid();
			if (isworknumberOK == false) {
			showError("worknumber");
			} else {
			hideError("worknumber");
		}
	}
//---------------------------------------------------------------------
	function validatemobilenumberField(event) {
			 myFocusHandler(event);

			var ismobilenumberlOK = false; 

			ismobilenumberOK = ismobilenumberValid();
			if (ismobilenumberOK == false) {
			showError("mobilenumber");
			} else {
			hideError("mobilenumber");
		}
	}


//------------validate at leat one phone number entered--------------------------------------------------------------------------
			function check_all() {
				var homenumber = document.getElementById("homenumber");
				var worknumber = document.getElementById("worknumber");
				var mobilenumber = document.getElementById("mobilenumber");
				
											
				if (homenumber.length== "" ||worknumber.length>0 ||mobilenumber.length== "") {
					allphoneFieldsOK=true;
				}else{
					allphoneFieldsOK=false;
				if (homenumber.length>0 ||worknumber.length== "" ||mobilenumber.length== "") {
					allphoneFieldsOK=true;
				}else{
					allphoneFieldsOK=false;
					
							
				}
				
				
				}

 HTML

  </head>
    <body>
  					 <label>Home phone : <input type="text" name="homenumber" id="homenumber"  onFocus="myFocusHandler(event);" onblur="validatehomenumberField(event);" size="16"/></label><br/>
                            <span id="homenumberhelp" class="helphide">Please enter 10 digit phone number </span>
                            <span id="homenumbererror" class="errorhide"> Enter Valid phone number</span>
                            


         				<label>Work Phone<input type="text" name="worknumber" id="worknumber"  onFocus="myFocusHandler(event);" onblur="validateworknumberField(event);" size="16"/></label><br/>
                            <span id="worknumberhelp" class="helphide">Please enter 10 digit phone number </span>
                           <span id="worknumbererror" class="errorhide"> Enter Valid phone number</span>
                             
                            
                       <label>Mobile :<input type="text" name="mobilenumber" id="mobilenumber"  onFocus="myFocusHandler(event);" onblur="validatemobilenumberField(event);" size="16"/></label><br/>
                            <span id="mobilenumberhelp" class="helphide">Please enter 10 digit phone number </span>
                           <span id="mobilenumbererror" class="errorhide"> Enter Valid phone number</span>
                 
 </body>             
</html>

[Philip M]

After validating the format of the phone numbers:-

if ((!ishomenumberOK) && (!isworknumberOK) && (!ismobilenumberOK)) {
alert ("You must fill in at least one phone number!");
return false;
}

Only one box can be filled in:-

<html>
<head>
<style type = "text/css">
.enabled {}
.disabled {
border-style:solid;
background-color:red;
border-color:red;
}

</style>
</head>

<body>

<form>
Complete one address box only:<br>
Home Address <input type = "text" name = "HA" class = "enabled" onblur = "dis()">
Work Address <input type = "text" name = "WA" class = "enabled" onblur = "dis()">
</form>


<script type = "text/javascript">

function dis() {
document.forms[0].HA.disabled = false;
document.forms[0].WA.disabled = false;
document.forms[0].HA.className = "enabled";
document.forms[0].WA.className = "enabled";

var h = document.forms[0].HA.value;
var w = document.forms[0].WA.value;

if (h.length >0) {
document.forms[0].WA.disabled = true;
document.forms[0].WA.className = "disabled";
}
if (w.length >0) {
document.forms[0].HA.disabled = true;
document.forms[0].HA.className = "disabled";
}
}

</script>

</body>
</html>

[Minoli Jayaward]

Many Thanks Philip.

It worked nicely. But I haven't learnt

document.forms[0]

Can't we do this with document.getElementByID/name. Little bit confusing b'cause I am a beginner.

Anyway thank you very much for your time.

MinJ

[Minoli Jayaward]

Hi Phillip,

I am having really big problems with my codes and need your help please.

I want to save user preferences using cookies. I have created cookies, Colour is perfectly working. font size and font colour is working but not stored in cookies. I have read several articles and try to fix this. But I couldn't. Please take a time to look at this code and help me.
Many thanks.
Mnj

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
//------Cookies---------------------

  function loadColourAsBackground(colorSelected) {
                var bodyElement;
		
                bodyElement = document.body;
                bodyElement.style.backgroundColor = colorSelected;
		
            }
	
	
            function handleSubmit() {
                var colorElement; // refers to the colour input element
                var colorSelected; // refers to the actual colour chosen.
		
		
		
                colorElement = document.getElementById("color");
                colorTyped   = colorElement.value;
                loadColourAsBackground(colorTyped);
                createCookie("preferredColour", colorTyped, 365);
                return false;
		
		
            }
	
            function handleWindowLoad(e) {
                var cookie; // the cookie found in the user's browser
                var colour; // the colour chosen
	  
                cookie = readCookie("preferredColour");
                // default the colour to white if the cookie wasnt found.
                if (cookie) {
                    colour = cookie;
                } else {
                    colour = "white";
                }
	  
                loadColourAsBackground(colour);
            }
	
	
//--------------------------------------------------------------------------

			function resizeText(changeSize) {
  
				if (document.body.style.fontSize== ""){
				document.body.style.fontSize ="1.0em";
				}
				  
				document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (changeSize * 0.2) + "em";
				}

		   function setCookie (name) {
				var Cookie
				var resizetext
				resizetext=bodyElement.value;
				createCookie("resizetext",tresizetext, 365);
				return false;

			}
//---------------------------------------------------------------------------
	
	  	 function fontColorChange(){
		
				document.getElementById('container').style.color = '#FF0000';
		}
	
	
	
	
            window.onload = handleWindowLoad;

<HTML>
<form action="#" method="post" onsubmit="return handleSubmit()">
<p>
<label class="myclass">Set Background Colour:</label>

<input type="text" name="color" id="color" />

<br />

<Input type="button" value= "big text" onclick="resizeText(1)" />
<input type="button" value= "Small text"onclick="resizeText(-1)" />

</p>

<input type="button" value="Text Color" onclick="fontColorChange()" />
</form

<HTML>