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.
Page 2 of 2 FirstFirst 12
Results 16 to 18 of 18
  1. #16
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by alex451 View Post
    For the purposes of what I need (which is to say this field is required) -

    Ha ha - beat you to it...... I have just discovered the wonderful simple way to add "Required" to the end of each line where I want the field to be completed...... two days of studying javascript... and one word does what I need!! I am now a happy girl - as is my manager...

    Thanks all for the help.....I may be back if they decide we need to do more than simply say "please complete this field"!!!
    There is a snag. The <required> tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. But it is NOT supported in Internet Explorer 9 and earlier versions, or in Safari. IE<10 is still in widespread use. The attribute is also not supported by several mobile operating systems, including Android.

    Any field using the required attribute must also have a name attribute. Fields without names are not a part of submission, so are ignored in validation. The same problem arises - any character entered into a required field will pass the validation.
    Last edited by Philip M; 07-29-2013 at 04:54 PM. Reason: typo

    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.

  2. #17
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is a real issue as we are testing on IE8. Back to the drawing board. My heart sinks... I was so happy with this attribute solution!

    So where do I go from here. I have to provide a working form by the end of this week....

    Below is the complete form I am working from. I have no idea who originally wrote this - all I had to do was "plug in" a form with fields that give an error message requesting they be filled (error message to be in Swedish)..

    I get there and then I get lost again... I do really appreciate the support...



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    		<head>
    						<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    							<title>Hur ditt bidrag kan göra skillnad - Sightsavers</title>
    																			<meta name="description" content="Varje bidrag hjälper oss att komma närmare vårt mål om att utplåna blindhet som kan förebyggas och att verka för lika rättigheter för människor med funktionsnedsättning." />
    						<meta content="Percussion CM System" name="generator"/>
    <meta name="perc_linkback" id="perc_linkback" content="FmRsY21ieAdkeAFkZWFheAZhZWF4E2RsY21g"/>
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers.css?v1.1" type="text/css" title="default" media="screen" charset="utf-8" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_med.css?v1.1" type="text/css" title="medium" media="screen" charset="utf-8" disabled="true" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_lge.css?v1.1" type="text/css" title="large" media="screen" charset="utf-8" disabled="true" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_text.css" type="text/css" title="text" media="screen" charset="utf-8" disabled="true" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_text_med.css" type="text/css" title="text_medium" media="screen" charset="utf-8" disabled="true" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_text_lge.css" type="text/css" title="text_large" media="screen" charset="utf-8" disabled="true" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sightsavers_print.css" type="text/css" media="print" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sIFR-screen.css" type="text/css" media="screen" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/sIFR-print.css" type="text/css" media="print" />
    			<link rel="stylesheet" href="http://www.sightsavers.se/css/mobile.css" type="text/css" media="handheld" />
    			<link media="only screen and (max-device-width: 480px)" href="http://www.sightsavers.se/css/mobile.css" type= "text/css" rel="stylesheet">
    						<script type="text/javascript" src="http://www.sightsavers.se/js/swfobject.js"></script>
    			<script type="text/javascript" src="cjs/v1/swfobject.js"></script>
    			<script type="text/javascript" src="http://www.sightsavers.se/js/styleswitcher.js"></script>
    			<script type="text/javascript" src="http://www.sightsavers.se/js/ssi.js"></script>
    			<script type="text/javascript" src="http://www.sightsavers.se/js/faq.js"></script>
    			<script type="text/javascript" src="/ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    			<script type="text/javascript" src="http://www.sightsavers.se/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
                <link rel="stylesheet" href="/js/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    			<script type="text/javascript" src="http://www.sightsavers.se/js/jquery.cookies.2.2.0.js"></script>
    															        <script type="text/javascript">
              var _gaq = _gaq || [];
              _gaq.push(['_setAccount', 'UA-3584917-37']);
              _gaq.push(['_trackPageview']);
              (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
              })();
            </script>
    							<script type="text/javascript" src="http://www.sightsavers.se/js/ssi-google.js"></script>
    			<style type="text/css">
    			fieldset {
    				width: 500px;
    				padding: 50px:
    				}
    			legend {
    				font-size: 20Px;
    			}
    			label.field {
    				text-align: left;
    				width: 200px;
    				float: left;
    				font-weight: bold;
    				padding: 50px:
    
    			}
    			Input.textbox-10 {
    				width: 100px;
    				float: left;
    				text-align: right;
    				font-weight: bold;
    			}
    			fieldset p {
    				clear:both;
    				padding: 15px;
    				text-align: right;
    				width: 100px;
    				float: left;
    				font-weight: bold;
    			}
    			<fieldset>
    </style>
    
    					</head>
    
    		<body id="internal" class="about">
    			<div id="header_container">
    				<div id="header">
    					<a href="http://www.sightsavers.se/"><img src="/images/sightsavers_logo.gif" alt="Sightsavers Logo" /></a>
    					<div id="skiplink"><a href="#contentstart">skip to content</a></div>
    					<div id="skiplink"><a href="#navstart">skip to navigation</a></div>
    					    					<div id="forms">
    
        						<form action="/search/default.asp" method="get" accept-charset="utf-8">
        							<p>
        								<input id="fSearch" name="fSearch" class="search_box" type="text"  onblur="if (!this.value) this.value=this.defaultValue" onfocus="if (this.value==this.defaultValue) this.value=''; else this.select()" value="Enter keyword"/>
        								<input class="search_button" type="image" value="Search" title="Click here to search" src="/images/search_button.gif"/>
        							</p>
        						</form>
    
    
    
    <form name="useful_links" action="/search/useful_links.asp" class="useful_links">
    	<p>
    		<select id="links" name="links">
    			<option value="/">Useful links</option>
    
    																		    																							</select>
    		<input type="image" src="/images/go.gif" title="Click here to visit the selected useful link" value="Search" class="search_button">
    	</p>
    </form>
    
    
        					</div>
        					<div id="style_select">
        						<p>
        							<a href="#" class="text_only_link" onclick="javascript: setCookie('fontSize', 'text');"><strong>Text only version</strong></a>
        							<a href="#" class="graphical_link" onclick="javascript: setCookie('fontSize', 'default');"><strong>Graphical version</strong></a>
        							<span> | </span><strong>Text size:</strong>
        							<span>
        								<a href="#" class="text_only_link" onclick="javascript: setCookie('fontSize', 'default');">Small</a>
        								<a href="#" class="text_only_link" onclick="javascript: setCookie('fontSize', 'medium');">Medium</a>
        								<a href="#" class="text_only_link" onclick="javascript: setCookie('fontSize', 'large');">Large</a>
        							</span>
        							<span>
        								<a href="#" class="graphical_link" onclick="javascript: setCookie('fontSize', 'text');">Small</a>
        								<a href="#" class="graphical_link" onclick="javascript: setCookie('fontSize', 'text_medium');">Medium</a>
        								<a href="#" class="graphical_link" onclick="javascript: setCookie('fontSize', 'text_large');">Large</a>
        							</span>
        						</p>
        					</div>
    									</div>
    
    
    
    
    	<div id="navigation">
    		<ul>
    						<li>
    					<a href="http://www.sightsavers.se/default.html">Hem</a>
    				</li>
    
    
    		        			        			        			        			        			        			        			        	        		<li>
                    											<a href="http://www.sightsavers.se/om_oss/default.html">Om oss</a>
    					                        		</li>
            			        	        		<li>
                    											<a href="http://www.sightsavers.se/vart_arbete/default.html">Vårt arbete</a>
    					                        		</li>
            			        	        		<li>
                    											<a id="current" href="http://www.sightsavers.se/stod_oss/default.html">Stöd oss</a>
    					                        		</li>
            			        	        		<li>
                    											<a href="http://www.sightsavers.se/vanliga frågor/default.html">Vanliga frågor</a>
    					                        		</li>
            						</ul>
    	</div>
    								</div>
    
    
    
    
    		<div id="container">
    			<div id="page_header" style="width: 690px; *float:left;">
    									<div class="welcome_box">
    						<div class="welcome_text">
    														<p>John Makhonde rör vid sin hustrus ansikte efter att han opererats för gråstarr och fått tillbaka sin syn.</p>							<p class="welcome_copyright">&copy; Zul Mukhida/Sightsavers</p>						</div>
    
    						<img class="welcome_image" src="http://www.sightsavers.se/images/content/19687.jpg" height="217" width="500" alt="John Makhonde ler och rör vid sin hustrus ansikte. "/>
    														</div>
    
    			</div>
    			<div id="right_nav" style="width:254px;float:right;*margin-top:15px;*width:253px;*overflow:hidden;">
    																	        		<div id="sidebar">
    
    				    				        				    					    				        		</div>
    			</div>
    			<div id="content">
    
    
    
    
    
    
    
    
    
    	<a class="hidenamed" name="navstart">navigation</a>
    <div id="side_nav">
    
    
    
    
    
    
    
    
    
    
    
        		    		</div>
    
    
                	<div class="internal_content">
    
    
    
    
    
    
    
    
    <!--    	<div id="breadcrumb">
    			<p>
    
    	    				<a href="http://www.sightsavers.se/default.html">Hem</a>
    		            		            			            			            			            			            			            			            			            			            			        			&raquo;	Stöd oss
    
    
    
    			    	    			            				</p>
    	   </div>
    -->
    	   <a class="hidenamed" name="contentstart">content</a>
    
    					<h1>Autogiromedgivande</h1>
            			        			<div id='body_text'><div id="body_text"><div><p>
    
            			        			<body>
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
    <!--  If necessary, please modify the charset parameter to specify the        -->
    <!--  character set of your HTML page.                                        -->
    <!--  ----------------------------------------------------------------------  -->
    
    <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <FORM> element to your page.             -->
    <!--  ----------------------------------------------------------------------  -->
    
    <form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
    
    <fieldset>
    
    <!--<input type=hidden name="oid" value="00Db0000000KV2S">
    <input type=hidden name="retURL" value="http://">-->
    
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
    <!--  these lines if you wish to test in debug mode.                          -->
    <!--  <input type="hidden" name="debug" value=1>                              -->
    <!--  <input type="hidden" name="debugEmail"                                  -->
    <!--  value="m.hiscock@appichar.co.uk">                                       -->
    <!--  ----------------------------------------------------------------------  -->
    
    
    <label class="field" for="first_name" >Förnamn</label><input  id="first_name" maxlength="40" name="first_name" size="40" type="text" class="textbox=300" /><br>
    <label class="field" for="last_name">Efternamn</label><input  id="last_name" maxlength="80" name="last_name" size="40" type="text" class="textbox=300" /><br>
    <label class="field" for="street">Gatuadress</label><input  id="street" maxlength="80" name="street" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="CO_Address">c/o adress</label><input  id="CO_Address" maxlength="80" name="co_address" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="Postnummer">Postnummer</label><input  id="Postnummer" maxlength="40" name="Postnummer" size="40" type="text" class="textbox=300"/><br>
    <label class="field" for="city">Ort</label><input  id="city" maxlength="40" name="city" size="40" type="text" class="textbox=300" /><br>
    <label class="field" for="state">Landskap</label><input  id="state" maxlength="20" name="state" size="40" type="text" class="textbox=300" /><br>
    <!--<label class="field" for="country">Country</label><input  id="country" maxlength="40" name="country" size="40" type="text" class="textbox=300"/><br>-->
    
    <label class="field" for="Personal Number" >Personnummer</label><input class="field" id="00Nb0000003NLeM" maxlength="40" name="00Nb0000003NLeM" size="20" type="text" class="textbox=300"/><br>
    <label class="field" for="Mobile Number" >mobilnummer</label><input class="field" id="00Nb0000003NLeM" maxlength="40" name="00Nb0000003NLeM" size="20" type="text" class="textbox=300"/><br>
    <label class="field" for="email">E-postadress</label><input  id="email" maxlength="80" name="email" size="40" type="text" class="textbox=300" onblur = "checkEmail()" /><br>
    <label class="field" for="phone">Telefonnummer</label><input  id="phone" maxlength="40" name="phone" size="40" type="text" /><br>
    <label class="field" for="Opt Out Mail">Opt Out Mail:</label><input  id="00Nb0000003OktL" name="00Nb0000003OktL" type="checkbox" value="1" /><br>
    <label class="field" for="Opt Out Phone">Nej tack till telefonsamtal:</label><input  id="00Nb0000003OllM" name="00Nb0000003OllM" type="checkbox" value="1" /><br>
    <label class="field" for="Opt Out Email">Nej tack till e-post:</label><input   id="00Nb0000003Oloz" name="00Nb0000003Oloz" type="checkbox" value="1" /><br>
    <label class="field" for="Opt In SMS">Opt In SMS:</label><input   id="00Nb0000003OlsX" name="00Nb0000003OlsX" type="checkbox" value="1" /><br>
    
    <input type="submit" name="submit">
    
    </p></div></div>
    </div>Så snart du har fyllt i dina uppgifter kommer vi att skicka dig ett autogiromedgivande. När vi får tillbaka ditt ifyllda medgivande kommer dina månadsgåvor att förändra livet för människor i utvecklingsländer genom att förhindra blindhet som går att förebyggas och ge synskadade samma möjligheter som alla andra. Tack!</div>
    
    </form>
    
    </body>
    </p></div></div>
    
    
    
            			        				<div class="page_print" style="float:left">
        	<!-- AddThis Button BEGIN -->
                <!-- AddThis Button BEGIN -->
            <!--<div class="addthis_toolbox addthis_default_style">
    		<span class="addthis_separator"><strong>Share this </strong></span>
            <a class="addthis_button_facebook" title="Send to Facebook"></a>
            <a class="addthis_button_twitter" title="Tweet this"></a>
            <a class="addthis_button_google" title="Send to Google"></a>
            <a class="addthis_button_digg" title="Digg this"></a>
            <a class="addthis_button_stumbleupon" title="Send to StumbleUpon"></a>
            <a class="addthis_button_google_plusone" g:plusone:size="small" style="width:50px;max-width:50px;" title="Send to Google +1"></a>
            <span class="addthis_separator">|</span>
            <a class="addthis_button_email" title="Email a friend"></a>
            <a class="addthis_button_print" title="Print"></a>
                            </div>
    				        <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=sightsavers"></script>
            <!-- AddThis Button END -->
    
        	<!-- AddThis Button END -->
    	</div>
                	</div>
    			</div>
    		</div>
    
    
    
    
    
    
        	<div id="footer">
    				<p>&copy; Sightsavers. Registered charity numbers 207544 and SC038110. |
    
      																																	</p>
    		<p style="padding-top:3px;"><img src="/images/flag_gb.png" alt="" /><a href="http://www.sightsavers.org/" class="flags">Britain</a> |<img src="/images/flag_in.png" alt="" /><a href="http://www.sightsaversindia.in/" class="flags">India</a> |<img src="/images/flag_ir.png" alt="" /><a href="http://www.sightsavers.ie/" class="flags">Ireland</a> |<img src="/images/flag_it.png" alt="" /><a href="http://www.sightsavers.it/" class="flags">Italy</a> |<img src="/images/flag_uae.png" alt="" /><a href="http://www.sightsavers.org/[middle_east]/sightsavers_middle_east/default.html" class="flags">Middle East</a> |<img src="/images/flag_us.png" alt="" /><a href="http://www.sightsaversusa.org/default.html" class="flags">United States</a></p>
    			</div>
    
    			<script language="Javascript" type="text/JavaScript">
    				alterFont(this);
    			</script>
    
    
    
    	<script type="text/javascript">
       var pageTracker;
    
       _gaq.push(function() {
             pageTracker = _gat._getTracker('UA-3584917-37');
          });
    
       var addthis_config = {
          data_ga_tracker: pageTracker,
          data_track_clickback: true
       };
    </script>
    
    					</body>
    	</html>
    Last edited by VIPStephan; 07-29-2013 at 06:41 PM. Reason: added code BB tags

  3. #18
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Philip M View Post
    There is a snag. The <required> tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. But it is NOT supported in Internet Explorer 9 and earlier versions, or in Safari. IE<10 is still in widespread use. The attribute is also not supported by several mobile operating systems, including Android.
    true, but it's easy enough to recycle the new markup in older browsers, and certainly much cleaner and more semantic than abusing classes for the task.

    i just made this up, but you can see what it's trying to do:
    Code:
    <style>
    :invalid, [invalid] {  background: red; }
    <style>
    <script>
    
    
    if( ! required in document.createElement("input")){
    
    $("[required"]).change(function(){
      
      if(! $(this).val() ){ 
          this.focus(); this.setAttribute("invalid", true); 
        }else{
           this.removeAttribute("invalid");
       }
    
    });
    
    }//end if required attrib supported?
    </script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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