www.webdeveloper.com
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 36

Thread: Validating textarea

  1. #16
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    You are still changing things, you nee a -1 in this field because the JavaScript validation explicitly tests for it

    <option value="">Choose one</option> must be <option value="-1">Choose one</option>

    Code:
    if( county==-1 ){
    ...
    <form method="post" name="form1" action="ContactUs_FormSent.asp">

    needs to be

    <form method="post" name="form1" action="ContactUs_FormSent.asp" onsubmit="return echeck(this);"> as well as having an enctype set.

    <input class="button" type="submit" value="Send Message" name="submit2">

    needs to be

    <input class="button" type="submit" value="Send Message" name="submit">

    <input type="text" id="name" name="YourName" size="16" required>
    needs to be
    <input type="text" id="name" name="YourName" size="16" value="" required>

    there are certain things you have to have in order to submit a form and also when validating a form using JavaScript, you have to be able to access the DOM elements, even if the value="" has no preset value, server-side languages for example PHP require that you have them otherwise you have empty fields or it does not "See" the data if any is present.

    Try correcting and see what the validation errors are and you say that the message area is not validating, what is it not validating? When I use the JavaScript I knocked up, it validates as expected, if its and empty field then it asks for input.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  2. #17
    Join Date
    Nov 2006
    Posts
    229
    Quote Originally Posted by \\.\ View Post
    You are still changing things, you nee a -1 in this field because the JavaScript validation explicitly tests for it

    <option value="">Choose one</option> must be <option value="-1">Choose one</option>

    Code:
    if( county==-1 ){
    ...
    <form method="post" name="form1" action="ContactUs_FormSent.asp">

    needs to be

    <form method="post" name="form1" action="ContactUs_FormSent.asp" onsubmit="return echeck(this);"> as well as having an enctype set.

    <input class="button" type="submit" value="Send Message" name="submit2">

    needs to be

    <input class="button" type="submit" value="Send Message" name="submit">

    <input type="text" id="name" name="YourName" size="16" required>
    needs to be
    <input type="text" id="name" name="YourName" size="16" value="" required>

    there are certain things you have to have in order to submit a form and also when validating a form using JavaScript, you have to be able to access the DOM elements, even if the value="" has no preset value, server-side languages for example PHP require that you have them otherwise you have empty fields or it does not "See" the data if any is present.

    Try correcting and see what the validation errors are and you say that the message area is not validating, what is it not validating? When I use the JavaScript I knocked up, it validates as expected, if its and empty field then it asks for input.
    I made the changes you suggested and integrated the previous posters code as well. This seems to be working fine except in IE8 and IE9. Below is the code:

    Code:
    <script language="JavaScript">
    function setFocus() {
    			document.form1.YourName.focus();
    			}	
    
    
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    	event.preventDefault();
    	
    	var emailID		= o.EmailHome.value,
    		yourName	= o.YourName.value,
    		street		= o.StreetAddress.value,
    		city		= o.City.value,
    		county		= o.County[o.County.selectedIndex].value,
    		zip		= o.Zip.value,
    		msg		= o.message.value;	
    
    	if( yourName.length==0 ){
    		alert("Please Enter your Your Name");
    		o.YourName.focus();
    		return false;
    	}
    	  
    	var parts = emailID.split("@");
    	domain = parts.length>1 && parts[1].indexOf(".")>0 ? true : false;
    	if(!domain){
    		alert("Need Email Address");
    		o.EmailHome.focus();
    		return false;
    	}
    	
    	if ( street.length==0 ){
    		alert("Please Enter your Street Address");
    		o.StreetAddress.focus();
    		return false;
    	  }	
    	  
    	if ( city.length==0 ){
    		alert("Please Enter your City");
    		o.City.focus();
    		return false;
    	  }	
    	  
    	if ( zip.length==0 ){
    		alert("Please Enter your Zip Code");
    		o.Zip.focus();
    		return false;
    	  }	
    	
    	if( county==-1 ){
    		alert("Please Select your County");
    		o.County.focus();
    		return false;
    	}
    	
    	  	  
    	if ( msg.length==0 ){
    		alert("Please Enter your Your Message");
    		o.message.focus();
    		return false;
    	}
        
    	document.forms['form1'].submit();
     	return true;
    }
    
         </script>
    HTML Code:
    <form method="post" name="form1" action="ContactUs_FormSent.asp" onsubmit="return echeck(this);">
     
     <p><label for="name">Name</label><input type="text" id="name" name="YourName" size="16" value="" required></p>
    
     <p><span class="red">**</span> <label for="phone">Phone</label><input type="text" id="phone" name="PhoneNumber" size="15" value=""></p>
     
     <p><label for="email">Email</label><input type="text" id="email" name="EmailHome" size="27" value="" required></p>
           
     <p><label for="street">Street Address</label><input type="text" id="street" name="StreetAddress" size="27" value="" required></p>
           
     <p><label for="city">City</label><input type="text" id="city" name="City" size="27" value="" required></p>
           
     <p><label for="zip">Zip</label><input type="text" id="zip" name="Zip" value="" required></p>
           
     <p><label for="county">County</label><select id="county" name="County" value="" required>
    		<option value="">Choose one</option>
    		<option value="Bucks">Bucks</option>
    		<option value="Chester">Chester</option>
    		<option value="Delaware">Delaware</option>
    		<option value="Montgomery">Montgomery</option>
    		<option value="Philadelphia">Philadelphia</option>
    	   </select></p>
           
     <div id="messageLabel"><label for="message">Message</label></div> <div id="messageHolder"><textarea type="text" id="message" name="message" cols="25" rows="7" value="" required></textarea></div>
    
     <p class="red clear">** <i>Optional</i></p>
         
     </div>
     
    <input class="button" type="submit" value="Send Message" name="submit">
    
    </form>
    Last edited by ASPSQLVB; 08-18-2014 at 01:48 PM.

  3. #18
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Ummmm naughty IE.

    Iused a specific event handler for MSIE browsers and in the modified script under IE, it still submitted with a blank set of entries...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #19
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Just tried this modified event handler...

    Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    
    	var evt = event ? event:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    
    ...
    Seems to work until the message part... going to sleep on it.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  5. #20
    Join Date
    Nov 2006
    Posts
    229

    Wink

    Quote Originally Posted by \\.\ View Post
    Just tried this modified event handler...

    Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    
    	var evt = event ? event:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    
    ...
    Seems to work until the message part... going to sleep on it.
    LOL....Sleep on it....you can say that again. Im ready for a nap now. I am very grateful for your time and expertise on this matter. Your help is greatly appreciated.

  6. #21
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    I have changed it to this

    Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    
    	var evt = event ? event:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    	evt.cancelBubble = true;

    The only problem I am experiencing is the form won't submit and I am wondering if my JavaScript interpreter is corrupt because the thing allows document.forms[0].reset() to function but document.forms[0].submit() to not work and throws an error in Chrome : Uncaught TypeError: object is not a function and debuger in MSIE8 does not like the debugger reports : Object doesn't support this property or method

    So I am going to suggest that you add the changes, try it out and let us know what happened.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #22
    Join Date
    Nov 2006
    Posts
    229
    Quote Originally Posted by \\.\ View Post
    I have changed it to this

    Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    
    	var evt = event ? event:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    	evt.cancelBubble = true;

    The only problem I am experiencing is the form won't submit and I am wondering if my JavaScript interpreter is corrupt because the thing allows document.forms[0].reset() to function but document.forms[0].submit() to not work and throws an error in Chrome : Uncaught TypeError: object is not a function and debuger in MSIE8 does not like the debugger reports : Object doesn't support this property or method

    So I am going to suggest that you add the changes, try it out and let us know what happened.
    Yes...I noticed the error in Chrome as well. And its validating in IE but it will not submit. The only browser that seems to be working fine is FireFox.
    Last edited by ASPSQLVB; 08-18-2014 at 10:08 PM.

  8. #23
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    I posed a question in a web forum but I am still puzzled as to why suddenly this would happen but it has been said that the issues the name of the button for the form submission, so if you change

    <input class="button" type="submit" style="cursor: pointer;" value="Submit" name="submit">

    to

    <input class="button" type="submit" style="cursor: pointer;" value="Submit" name="submitform">

    it should do the trick, that does not explain why Firefox should work and the others not, for as long as I can remember, the method employed in the script I supplied has always worked...
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #24
    Join Date
    Nov 2006
    Posts
    229
    Some serious progress has certainly been made. Everything is working fine in both IE and Chrome but now Firefox is not validating the Email field and the drop down box for Choosing a County. The @ symbol is not checked for and the drop down box is not validated at all.

  10. #25
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Firefox appears to behave with this mod I introduced.

    NOTE: I have made some changes to the JavaScript and <input> field names, the changes were to cut down on the amount of code
    HTML Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    	try{
    	var	evt = !event ? o : event;
    		evt = event ? evt:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    	evt.cancelBubble = true;
    	}catch(e){
    		o.addEventListener('submit', function(evt){ evt.preventDefault(); }, false );
    		}
    	var emailAddress= o.EmailAddress.value,
    		yourName	= o.YourName.value,
    		street		= o.StreetAddress.value,
    		city		= o.City.value,
    		county		= o.County[o.County.selectedIndex].value,
    		zip			= o.ZipCode.value,
    		msg			= o.Message.value,
    		r			= false,
    		e			= "";	
    
    	e = ( yourName.length==0 ) ? "Your Name" : e;
    	var parts = emailAddress.split("@");
    	domain = parts.length>1 && parts[1].indexOf(".")>0 ? true : false;
    	e = (!domain) ? "Email Address" : e;
    	e = ( street.length==0 ) ? "Street Address" : e;
    	e = ( city.length==0 ) ? "City" : e;
    	e = ( zip.length==0 ) ? "Zip Code" : e;
    	e = ( county==-1 ) ? "County" : e;
    	e = ( msg.length==0 ) ? "Message" : e;
    	
    	if( e.length ){
    		alert( "Please Enter your " + e );
    		o[(e.replace(" ",""))].focus();
    		return false;
    	}
    		
    	o.submit();
     	return true;
    }
    		       
         //////////////////////UPDATE FISH ANGLER PROMPT\\\\\\\\\\\\\\\\\\\\\\\\\ 
         </script>
    </head>
    <BODY bgcolor="000000">
    
    <form method="post" id="form1" name="form1" action="somewheretogoto.php" enctype="multipart/form-data" onSubmit="return echeck(this);" lang="en">
    
     <table class="FREE_Offer_Form">
     <tr>
      <td>&nbsp;
       
      </td>
     </tr>
    
     <tr align="left">
      <td name="FirstName">
        <font color="ffffff">
             Name
            </font>
             &nbsp;<input name="YourName" size="16" type="text" value="" />    
           </td>
          </tr>
         
         <tr align="left">
           <td>
            
             <font color="red">**</font>
             <font color="ffffff">Phone
             </font>
             <input name="PhoneNumber" size="15" type="text" value="" />       
           </td>
           </tr>
          
           <tr align="left">
           <td>
            <font color="ffffff">
             Email 
            </font>
             <input name="EmailAddress" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             Street Address
            </font>
             <input name="StreetAddress" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             City
            </font>
             <input name="City" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             Zip
            </font>
             <input name="ZipCode" size="27" type="text" value="" />       
           </td>
           </tr>
           
           
           <tr align="left">
           <td>
             <font color="ffffff">County
             </font>
              <select name="County" size="1">
    		  	<option value="-1" selected>Please Select</option>
                <option>Bucks</option>
    			<option>Chester</option>
    			<option>Delaware</option>
    			<option>Montgomery</option>
    			<option>Philadelphia</option>
    		</select>
    	   </td>
           </tr>
           
           <tr align="left">
            <td>
           <table width="200px" align="center">
            <td valign="top">
             <font color="ffffff" size="3">Message</font>
            </td>
            <td> 
              <textarea name="Message" cols="25" rows="7"></textarea>  
             </td> 
            </table> 
            </td>
           </tr>
           
           <tr align="left">
           <td>
                  
             
            <font color="red">
             ** <i>Optional</i>
             </font>
            </td>
           </tr>
         
     </table>
    <input class="button" type="submit" style="cursor: pointer;" value="Submit" name="submitform">
    
    </form>
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  11. #26
    Join Date
    May 2014
    Posts
    912
    No offense guys, but this is just getting worse and worse as you're not really addressing some of the deep-rooted issues. @kevin2 at least TRIED on the markup side, but really what makes an INPUT and LABEL a grammatical paragraph?!? That's as bad as saying it's tabular data.

    Tables for layout, font tags, trapping click on the button instead of onsubmit on the form... much less the pointlessly redundant scripting checks... even the Alert is far less than useful as it's usually better to change a class to highlight the offending fields, focus the first offending field, and add an error message in a P after the input when/if there is an error.

    The way I handle this type of validation gets a bit more complex, but it has a number of advantages. First off I use classes to say what the field should be validated as. This means if desired we can style them from the CSS (like color coding required inputs), and we can have our scripting trap the validations so that we don't have to hard code the check for each and every input. It also means re-usable scripting where you can use one script for many forms. Second I don't use the onevent attributes in the markup as that's IMHO sloppy coding. If it's not markup or content, it doesn't belong in the markup it belongs in the scripting. GOOD scripting should hook the markup/DOM, not the other way around. (hence why IMHO things like onclick and onchange should be stricken from HTML).

    Our first order of business will be to clean up the markup, dragging it kicking and screaming out of the 1990's.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <title>
    	Form Validation Demo
    </title>
    
    </head><body>
    
    <h1>Form Validation Demo</h1>
    
    <form method="post" action="#" class="validate">
    
     <fieldset>
     
    		<label for="name"><b>*</b> Name:</label>
    		<input type="text" id="name" name="YourName" class="v_required" />
    		<br />
    
    		<label for="phone">Phone:</label>
    		<input type="text" id="phone" name="PhoneNumber" />
    		<br />
     
    		<label for="email"><b>*</b> Email:</label>
    		<input type="text" id="email" name="EmailHome" class="v_required v_eMail" />
    		<br />
    			 
    		<label for="address"><b>*</b> Address:</label>
    		<input id="address" type="text" name="StreetAddress" class="v_required" />
    		<br />
    			 
    		<label for="city"><b>*</b> City:</label>
    		<input type="text" id="city" name="City" class="v_required" />
    		<br />
    			 
    		<label for="zip"><b>*</b> Zip:</label>
    		<input type="text" id="zip" name="Zip" class="v_USZip v_required" />
    		<br />
    			 
    		<label for="county"><b>*</b> County:</label>
    		<select id="county" name="County" class="v_required">
    			<option value="">Choose one</option>
    			<option value="Bucks">Bucks</option>
    			<option value="Chester">Chester</option>
    			<option value="Delaware">Delaware</option>
    			<option value="Montgomery">Montgomery</option>
    			<option value="Philadelphia">Philadelphia</option>
    		</select>
    		<br />
    		
    		<label for="message">Message:</label>
    		<textarea
    			id="message" name="message"
    			cols="25" rows="7"
    			class="v_required"
    		></textarea>
    		
    	</fieldset>
    	
    	<div class="submitsAndHiddens">
    		<ul>
    			<li><b>*</b> Required Fields <span class="v_required"></span></li>
    			<li>Valid value <span class="v_ok"></span></li>
    			<li>Invalid value <span class="v_error"></span></li>
    			<li>Optional <span></span></li>
    		</ul>
    		<input type="submit" value="Send Message" />
    	<!-- .submitsAndHiddens --></div>
    
    </form>
    
    <script type="text/javascript" src="validate.js"></script>
    
    </body></html>
    For example. I use XHTML 1.0 Strict as it's one of the two latest actual recommendation doctypes, and generally speaking I don't see HTML 5 delivering much of anything of actual value over it. (though there is some stuff being shoved down our throats whether we like it or not -- see AUDIO and VIDEO which are idiotically redundant to OBJECT)

    I load the script before </body> so that the DOM is built so we don't have to wait for onload to hook markup elements, to help it load faster and render faster if it's pre-cached. Really on modern scripting that's where it belongs no matter what some people seem to have deluded themselves into thinking on the subject.

    The script I'm recycling from my current WIP next-gen form builder. I put a live copy up here:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/ASPSQLVB

    is wide open for easy access to the gooey bits and pieces.

    The script itself:
    http://www.cutcodedown.com/for_other...VB/validate.js

    Puts everything in a nice safe anonymous function, with static methods inside it for any function that would be assigned more than once to an event. [i](A number of folks seem to have taken the "anonymous assigned to multiple events wastes memory" and magically turned it into "never use anonymous functions" -- which is 100% grade A farm fresh manure akin to the people who turn "don't use tables for layout" into the "never use tables" idiocy)

    The outer anonymous self-calling function completely eliminates the chances of name-space collisions with any other functions you'd run on the page, while allowing us to have some global-type variable behaviors. (emulating object scope behavior from smalltalk or private statics in PHP singletons)

    It allows a whole slew of validation functions. There are 'checks' which see if the value in a field fits the desired result, and 'filters' that restrict what can be typed in a field to valid keystrokes only. Take "USZip" for example where it only allows 0..9 in the first 5 characters, then if you type another number it will auto-insert a hyphen; or you can type the hyphen... then it restricts the length. With fancy values like dates preventing people from even typing in the wrong characters is a great way to do it. Try out the mmddyyyy date check function some time...

    I'm on the way out the door, but when I get back I'll write up a section-by-section breakdown of the scripting and the CSS to explain the how/what/why of it.

    Hope this helps... even if it does pitch in the trash bin most everything done in this thread so far. At a little over 9k it's a bit bigger than I like in my scripting, but it gzips down to 2.7k so that's kind-of a non-issue. (minification delivers around 6k uncompressed, 2.1k gzipped, IMHO not even worth the effort).
    Java is to JavaScript as Ham is to Hamburger.

  12. #27
    Join Date
    Nov 2006
    Posts
    229
    Quote Originally Posted by \\.\ View Post
    Firefox appears to behave with this mod I introduced.

    NOTE: I have made some changes to the JavaScript and <input> field names, the changes were to cut down on the amount of code
    HTML Code:
    function echeck(o){ // o is the onsubmit="return echeck(this);" line in your form submit
    	try{
    	var	evt = !event ? o : event;
    		evt = event ? evt:window.event;
     	if (evt.preventDefault) evt.preventDefault();
     	evt.returnValue = false;
    	evt.cancelBubble = true;
    	}catch(e){
    		o.addEventListener('submit', function(evt){ evt.preventDefault(); }, false );
    		}
    	var emailAddress= o.EmailAddress.value,
    		yourName	= o.YourName.value,
    		street		= o.StreetAddress.value,
    		city		= o.City.value,
    		county		= o.County[o.County.selectedIndex].value,
    		zip			= o.ZipCode.value,
    		msg			= o.Message.value,
    		r			= false,
    		e			= "";	
    
    	e = ( yourName.length==0 ) ? "Your Name" : e;
    	var parts = emailAddress.split("@");
    	domain = parts.length>1 && parts[1].indexOf(".")>0 ? true : false;
    	e = (!domain) ? "Email Address" : e;
    	e = ( street.length==0 ) ? "Street Address" : e;
    	e = ( city.length==0 ) ? "City" : e;
    	e = ( zip.length==0 ) ? "Zip Code" : e;
    	e = ( county==-1 ) ? "County" : e;
    	e = ( msg.length==0 ) ? "Message" : e;
    	
    	if( e.length ){
    		alert( "Please Enter your " + e );
    		o[(e.replace(" ",""))].focus();
    		return false;
    	}
    		
    	o.submit();
     	return true;
    }
    		       
         //////////////////////UPDATE FISH ANGLER PROMPT\\\\\\\\\\\\\\\\\\\\\\\\\ 
         </script>
    </head>
    <BODY bgcolor="000000">
    
    <form method="post" id="form1" name="form1" action="somewheretogoto.php" enctype="multipart/form-data" onSubmit="return echeck(this);" lang="en">
    
     <table class="FREE_Offer_Form">
     <tr>
      <td>*
       
      </td>
     </tr>
    
     <tr align="left">
      <td name="FirstName">
        <font color="ffffff">
             Name
            </font>
             *<input name="YourName" size="16" type="text" value="" />    
           </td>
          </tr>
         
         <tr align="left">
           <td>
            
             <font color="red">**</font>
             <font color="ffffff">Phone
             </font>
             <input name="PhoneNumber" size="15" type="text" value="" />       
           </td>
           </tr>
          
           <tr align="left">
           <td>
            <font color="ffffff">
             Email 
            </font>
             <input name="EmailAddress" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             Street Address
            </font>
             <input name="StreetAddress" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             City
            </font>
             <input name="City" size="27" type="text" value="" />       
           </td>
           </tr>
           
           <tr align="left">
           <td>
            <font color="ffffff">
             Zip
            </font>
             <input name="ZipCode" size="27" type="text" value="" />       
           </td>
           </tr>
           
           
           <tr align="left">
           <td>
             <font color="ffffff">County
             </font>
              <select name="County" size="1">
    		  	<option value="-1" selected>Please Select</option>
                <option>Bucks</option>
    			<option>Chester</option>
    			<option>Delaware</option>
    			<option>Montgomery</option>
    			<option>Philadelphia</option>
    		</select>
    	   </td>
           </tr>
           
           <tr align="left">
            <td>
           <table width="200px" align="center">
            <td valign="top">
             <font color="ffffff" size="3">Message</font>
            </td>
            <td> 
              <textarea name="Message" cols="25" rows="7"></textarea>  
             </td> 
            </table> 
            </td>
           </tr>
           
           <tr align="left">
           <td>
                  
             
            <font color="red">
             ** <i>Optional</i>
             </font>
            </td>
           </tr>
         
     </table>
    <input class="button" type="submit" style="cursor: pointer;" value="Submit" name="submitform">
    
    </form>
    IT'S WORKING!!!!!!!!!! YIPPEE!!! Your truly amazing my friend! By the way...LOVE the Avatar. Thank You

  13. #28
    Join Date
    May 2014
    Posts
    912
    Alright, let's break down the scripting now that I've filled my belly... though I started writing this on the netbook while not listening to the blind lunch-date prattle on about things I couldn't give a flying purple fish about.

    Though as I wrote this breakdown I made improvements and bugfixes to the script -- that's part of why I like doing these breakdowns as sitting down and explaining the reasoning often leads to noticing bugs or thinking of improvements you'd otherwise not have noticed.

    First up, notice the comment at the start. No matter WHAT you do client-side there is NO subsitute for server-side validation. Client side validation be it HTML 5 or JS can only really be used to enhance the user experience by avoiding an extra pageload. That's all it's good for. This is why generally I don't even BOTHER using javascript for form validation, and when I do I make it perform IDENTICAL to how my server-side code would re-send the page.

    So when it comes time to write the back-end code, remember you have to do all of this again. This is why I usually have an array in PHP containing the labels and form element data to both build the form, and to run my validations against.

    As I mentioned, this is in a self-invoking anonymous function. Zero chance of namespace conflicts. I pass 'document' to itself as 'd' as it not only results in smaller code and not having to type 'document' a dozen times in the code, it actually runs faster as local scope vars are faster than global due to the search order.

    *** VARIABLES ***

    I'm a Pascal guy at heart, so usually I try to define all my variables at the top.

    states array - a list of valid states for v_USState to use. We're not using this in the example, I'm just providing it for completeness sake.

    filters object -- our various keyboard filter routines. Their object name is identical to their class name making it easier to iterate through them later using for (var x in filters) to then match against the input's className attribute. Returning true means the value was invalid / prevent the event from cascading.

    v_integer -- integers only allow entry of 0..9 as any character, or a minus sign as the first character.

    v_float -- same as v_integer but allows there to be ONE decimal point.

    v_USZip -- only allows 0..9 in characters 1 through 5 and 7 through 10. If you enter a number as character 6 a hyphen will be inserted before it, otherwise you can type a hyphen as character 6. This means 02345 and 03431-4000 can both be entered. If you enter 023600104, it will auto-change it to 02360-0104 as you type!

    v_mmddyyyy -- much like v_USZip it auto-formats, though in a more complex manner.

    checks object -- as with filters, checks use their classname as their object name. These methods are the checks that are run onsubmit as well as onblur/onchange. Also as per filters these return true for invalid.

    v_required -- return true if empty.

    v_USState -- return true if there's no match. I also turn them to uppercase.

    v_USZip -- in addition to preventing the keystrokes, I run a second check against a regex.

    v_eMail -- simple regex for client side. I HIGHLY suggest using a more robust check server-side where you can do things like hostname lookups.

    errorMessages -- list of messages to show when the checks fails. In a later version of this script I'm probably changing these to properties of 'checks'.

    errors -- holder variable to count the number of errors in a validation.

    handleField -- the first field OR field navigated away from that has an error.

    *** LIBRARY ***

    After that we have some useful library functions. Most of these are standalone versions of those in my elementals library; These are all things that honestly JS should have had in the first place -- some of which they are finally adding but sadly the official versions often run slower than my equivalents. :/ (like the various classXXX functions vs. ECMAScript classList.methods)

    classExists -- tests if element E has the class.

    classAdd -- adds the class or classes in className to e. To pass multiple classes you have to pass an array. Good enough for now. I may add space detection and a 'split' to it later. It checks if the class exists first and returns false if it already exists, true if it did not.

    classRemove -- remove the class/classes. Returns false if the class didn't exist, true if it was removed.

    eventAdd -- safely adds a handler function to element "e" for the event or array of events. This lets us hook our elements safely all the way back to IE 5.

    make -- creates a DOM element of type tagName. You can pass text or a DOM object as it's content, a list of attribs (do NOT try to pass complex attributes like STYLE), and a parent element if desired. Returns the created element.

    nodeNext -- finds the next element node. Same as nextSibling but only returns the element if it's nodeType is 1... which means a tag. NextSibling can often return whitespace, comments or even textNodes -- this won't.

    prevent -- you pass it an event handler, it will stop the event dead in it's tracks preventing bubbling, propagation, defautl behaviors, forcing a negative return value, and every other blasted way all the different browsers handle doing the same thing.

    Array.prototype.indexOf polyfill -- creates Array.indexOf for browsers that don't support it yet. This is WAY too handy a function to not have it available.

    So much for stock functions, on to our:

    *** UNIQUE CODE ***

    Aka the actual gruntwork of our routine.

    flushErrors -- destroys the error message for element E, which should be a INPUT, SELECT or TEXTAREA. We pull both the v_error and v_ok classes, then search for any near-sibling P.errorBox and killing it off as well by stripping it off the DOM.

    flushFieldList -- goes through the passed fieldList and runs flushErrors against it.

    flushFormErrors -- uses flushFieldList to run FlushErrors on all input, select and textarea, setting the error count to zero. We want to do this before we go through and check the entire page so we start from a clean slate.

    addError -- takes the passed 'input', applies the v_error class, then inserts a paragraph after the input containing the passed 'message' parameter. the errors counter is incremented.

    checkList -- this is used by the 'blur/change' method. goes throug the passed list of tags and runs any 'checks' that exist as classes against the 'value' of said tags. If the test fails, it calls addError -- if checks were performed but no errors created, the v_ok class is added saying 'this passed the check'. I use this in the CSS to color the element green. (instead of the yellow of "required but you've not used it yet' or the red for 'v_error')

    selectCheck -- provides the different logic for checking a select's value. The only valid check on a select is 'v_required' (for now) so that's the one we use, pulling the value from e.options[e.selectedIndex].value. This is used by both the blur/change handler and the onsubmit.

    selectCheckEvent -- the event handler for blur/change. In case you've not seen it, event handlers 'e' doesn't exist in all browsers, so if it fails we pull window.event for those browsers. Likewise different browsers use target or srcElement, so to pull the originating tag we have to || that value as well. We flush the errors, then check it.

    It should be noted I make all the select handlers we assing more than once a standalone function instead of an anonymous so we aren't making extra copies in mmemory. This is the 'complaint' many people have about anonymous functions that they blow out of proportions into "never use them"... easy enough to dodge that bullet while still using them when they are useful -- as in when you are calling/assigning them only ONCE.

    formSubmitCheck -- the handler for our onsubmit. We flush all errors, set the 'first field with an error' "handleField" to false, check the inputs and textareas with our checkList function, then manually check all the selects using selectCheck. If there were errors "handleField" will contain a link to the first input/select/textarea with an error, so we .focus() that... and if there were errors, we prevent the submit from going through.

    focusCheck -- our handler for when a field is focused. This is applied to every field in the form as if "handleField" is set, we want to focus that element instead. This forces the user to the first field on the form with an error.

    changeBlurCheck -- a handler for when an element is changed or blurred. I assign both as it's inconsistent cross-browser as to when/where/if each is fired. Sucks to assign to both onblur and onchange as some browsers will fire BOTH, but it's better than having it not work in some browsers.

    If the "handleField" is set, we just bomb out as there's no reason to do this. We then pull the originating elemnet, flush it's errors, and then run the script checks from the elements scriptCheckList attribute. (we'll cover that shortly). Error found we add the error. If v_error is not assigned, this element gets the v_ok class.

    Bah, post-size limit. To be continued in 60 seconds.
    Java is to JavaScript as Ham is to Hamburger.

  14. #29
    Join Date
    May 2014
    Posts
    912
    ... continued

    validationsCheck -- this creates the scriptCheckList attribute on a input. Some JS developers get their panties in a knot over adding attributes to DOM elemnets, I just don't get the problem. Doing this ahead of time makes the validations themselves faster, and really what are the odds of someone else wantint to use the attribute 'scriptCheckList'.

    We just go through, create the list of functions to be called, then if any were added we add the blur and change event handler.

    filterKeys -- the keypress handler. Pulls the event character code, runs it agains the key filter, prevents the event if the filter is false. We do NOT filter keycodes less than 32 so that things like enter, tab and backspace still function.

    filterCheck -- goes through the list of filters, sees if there's a matching class to it's name. If so it adds the 'scriptKeyFilter' attribute to the input/textarea and hooks it with the event. We return true if a filter is attached, and you can only attach one filter (whichever one is found first in the classes). False is returned if no filters were found.

    fieldCheckerAdd -- when passed a list of fields it assigns filters, validations and the focus event. I put the current field of the loop into a variable as array lookups are painfully slow, this speeds up the routine even if it does increase the memory footprint 4 to 16 bytes. (oh noes, not 16 BYTES while this function is running and at no other time)

    setup -- I run this in it's own function instead of an anonymous function so that it's variables are released when not in use. It pulls the list of forms, goes through them (assigning it to a var so we're not doing dozens of slow array lookups) seeing if the forms have the validate class. If so we add the submit handler and pull up the fieldsets. We go through the fieldsets (again copying the array lookup to a var) to go through and add our 'fieldCheckers' to all input and textarea, then go through our selects and give them their unique change and blur handler for v_required, and giving all of them the focus handler.

    We run setup(); and we're done. Poof, auto-hooking script.

    Alright, I'll write up a breakdown of the CSS next since I'm basically sitting here with my thumb up my backside waiting on someone else.
    Java is to JavaScript as Ham is to Hamburger.

  15. #30
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    HTML5 add more than just AUDIO and VIDEO to the game, it now trashes the need for FLASH as a video / audio source but also add some useful elements to things like the <input> tags for one, things like date which is a calendar date picker so that means all those date picker add ons via JS are redundant and it also adds a time element to it as well. Other items such as a canvas for drawing and animating complex object, one of the guys on here has a demo of his script floating around that demonstrates the canvas object working with JavaScript.

    So your current appraisal of HTML5 is not taking on board some of the advancements that have been long over due.

    As for the OP, the form and scripting is rudimentary and functional, nothing has been done to address data that can or cannot be entered or formatting. I really don't see the need for <label> tags given you have to click them to put the cursor in the <input tag, much simpler to click on the actual element and the point of focus is so that the visitor can type without having to click on the element. Nothing as yet has been done about highlighting the erroneous element, should the OP want it I am sure that they are capable of adding it or asking for help with it.

    Anonymous functions, if you search for articles discussing them, you will soon find that anonymous functions carry more overhead than regular functions. IMHO you are the one deluding yourself, several of the articles state that you should limit their use and to only use them when absolutely necessary. Its like the over abuse of eval() which when used properly is a benefit, yes I see the benefit of having anon functions but you need to limit them. No one said anything about using the onload="... tag or window.onload which I do avoid as much as possible.

    name-space collision happen when you have many working on a large project, a lone programmer is less likely to encounter such problems and when they do its something that can be resolved, why you place such emphasis on a problem that is quite mute I don't know.

    As for tables, if you don't like them don't use them, simples.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles