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 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Form validation help

    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");
    }
    }





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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Minoli Jayaward (10-04-2011)

  • #3
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Master Coder

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

    Minoli

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Minoli Jayaward (10-05-2011)

  • #5
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Here you are.

    Code:
    <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>

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Minoli Jayaward (10-06-2011)

  • #7
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #9
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Angry

    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

    Code:
    <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;
    					
    							
    				}
    				
    				
    				}
    Code:
     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>

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    After validating the format of the phone numbers:-

    Code:
    if ((!ishomenumberOK) && (!isworknumberOK) && (!ismobilenumberOK)) {
    alert ("You must fill in at least one phone number!");
    return false;
    }
    Only one box can be filled in:-

    Code:
    <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>
    Last edited by Philip M; 10-08-2011 at 10:05 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks great solution

    Many Thanks Philip.

    It worked nicely. But I haven't learnt
    Code:
    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

  • #12
    New Coder
    Join Date
    Oct 2011
    Location
    Australia
    Posts
    13
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

    Code:
    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>


  •  

    Posting Permissions

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