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 27 of 27
  1. #16
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,313
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Terrific, but as I have often said, my customers insist on older browsers being supported. They are not interested in web sites that only work in IE9 or better.

    I entered the date 47/89/3012 and it accepted it.

    Shome mishtake, shurely.

    I'll stick with my Javaascript.
    Last edited by Philip M; 12-08-2012 at 09:34 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.

  2. #17
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by AndrewGSW View Post
    Just my opinion.. but a single input on a page doesn't convince. It's when trying to create an entire form on a page that the differences are more obvious.

    Even so, it looks noticeably different in IE and, in fact, the submit button (which displays "Submit Query" and is therefore much wider) did nothing for me at all in IE9; the input-background is not pink. FF17 says "Please fill out this field" - it doesn't include the "dd/mm/yy". Added I am aware that not all of these points are directly relevant to HTML5.

    Personally, I am not interested in debating the point - I'm just recounting my experience and thoughts. Besides, I am not rejecting HTML5 - I'm happy to use it where it is useful (autofocus, required..), but one cannot ignore the differences.
    a single input is what we're discussing here. Yes, different browsers render some form controls slightly differently, but that's got nothing to do with js/html5 validation. a submit label diff? really? you're just being mean.


    the form has no reset css at all, this is a barebones example. at any rate, it's not as if using or not using javascript fixes browser rendering diffs you use against my solution.

    for raw html, IE10,FF,Ch,and Op all look pretty close in my book. certainly a designer would want to skin the raw form, which is why my example uses <label> and <b> tags.

    i'me not interested in debating either, but don't toss out arguments against something and run out the door, especially if most of them aren't germane.

    Javascript is for behavior, CSS is for presentation, and HTML is for document/data definition.


    I never ever said "don't use js", i think js can enhance HTML forms a lot.
    The whole point is that you should be doing an "all of the above" approach.

    Code to web standards, use JS to enhance the UI, gracefully degrade where standards or JS is absent, make sure it's accessible, D.R.Y., K.I.S.S., stand on the shoulders of giants, and don't re-invent the wheel, are all ambitions i try to follow. Humans are hypocritical by nature, folly is fun, but broadly speaking, I tend to lean towards those ideals, and i think HTML5 validation is a great starting point for any web app.

    Considering the cost, i really just cannot see any reason not to add those few extra attribs. i just don't understand why you would advice readers not to use them. i really can't.

    i would be fine with you saying "don't count on them", but to imply they should be used at all is plain silly imho.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  3. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Hey, no fair! That page has *BOTH* the HTML 5 specification *AND* uses JS validation!

    What's the point? If you have the JS validation there, you don't need the HTML 5 validation, do you?

    Let's strip it back to *JUST* the HTML 5 validation:
    Code:
    <!DOCTYPE html><html>
    <head>
    	<title>html5 form test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      [id]:valid, [id][valid]{ background:#cfc; }
      [id]:invalid, [id][invalid] { background:#fcc; outline: 0; box-shadow: none; }
    </style>
    
    </head>
    <body>
    <h1>htm5 form validation test </h1>
    <form onsubmit="return false;">
    	<label for="datedue">
    		<b>Date Due</b>
    		<input type="text" name="datedue" id="datedue" placeholder="12/31/2000" title="12/31/2000"
    		 pattern="^[01]*\d{1}[.\/][0123]*\d{1}[.\/]\d{2,4}$" 
                     required autofocus
    		/>
    	</label>
    </form>
    
    </body>
    </html>
    And now, indeed, it accepts 13/32/8888 and the field turns a pretty green.

    BUT...

    But isn't that the fault of the regular expression?!!??

    Even a *SMALL* fix to it helps a lot:
    Code:
        pattern="^(0?[1-9|1[012])[.\/](0?[1-9]|[12]\d|3[01])[.\/](19|20)\d\d$"
    That will still allow "2/29/2011" and "4/31/1926", but it's a huge improvement.

    Give me time and I'll create a regular expression that will only allow correct dates in, say, 1901 through 2099.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  4. #19
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Philip M View Post
    Terrific, but as I have often said, my customers insist on older browsers being supported. They are not interested in web sites that only work in IE9 or better.

    I entered the date 47/89/3012 and it accepted it.

    Shome mishtake, shurely.

    I'll stick with my Javaascript.

    i appreciated you taking the time to test it and provide feedback.
    I've updated the example a bit, integrating your code, while addressing some of the low-hanging UX points raised by our friend.

    It's like Captain Planet: "by our powers combined!!!".

    I tried to go for a universal (no language) validation routine using your date checker and a upgraded alert routine. You can make it friendlier to natives by using english or french or whatever.
    "Day is bad", "dia mal", "jour no bon" (i suck at frech), could provide richer UX at the cost of universality. this is an international starting point.


    I think that the js provides a better UX than HTML5 alone. It not much work to integrate both. The default HTML5 error messages can be a bit vague, and it's probably gonna be another 6-12 months before we can default to <input type=date>, (falling-back of course).

    I generic-azied your code to accept input fields instead of 3 numbers to reduce typing down the road, and to allow inputs to subscribe with one simple inline event handler.

    You can re-use the inform() method instead of alert() on any form using HTML5 syntax, regardless of the native browser support for HTML5 features. The <input> tag is a great place to keep information about the input. Certainly easier to maintain/debug than if it were buried in a <script src> on a CDN'ified production server...

    in conclusion, i think it's pretty cool how simple it is to homoginze the alert() and HTML5 validation, and the advantages of a hybrid approach should be self-evident:


    tested in IE7-10, FF, CH, OP:

    Code:
    <!DOCTYPE html><html>
    <head>
    	<title>html5 form test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      [id]:valid, [id][valid]{ background:#cfc; }
      [id]:invalid, [id][invalid] { background:#fcc; outline: 0; box-shadow: none; }
    </style>
    
    </head>
    <body>
      
      <h1>htm5 form validation test </h1>
    <form onsubmit="return false;">
    	<label for="datedue">
    		<b>Date Due</b>
    		<input type="text" name="datedue" id="datedue" placeholder="12/31/2000" title="12/31/2000"
    		 pattern="^[01]*\d{1}[.\/][0123]*\d{1}[.\/]\d{2,4}$" required autofocus onchange="checkValidDate(this)"
    		/>
    	</label>
    	<input type=submit value=test />
    </form>
    
    <script type = "text/javascript">
     
    
    function inform(inp, message){
    
      if(inp.setCustomValidity){
    		inp.setCustomValidity(message);
    	}else{
    		if(message){
    			alert(message+ "\n_________________\nex: " + inp.title); 
    			inp.setAttribute("invalid", true);
    			inp.removeAttribute("valid");
    		}else{
    			inp.setAttribute("valid", true);
    			inp.removeAttribute("invalid");
     		}		
          }//end html5/legacy
    }//end inform()
    
     
    function checkValidDate(inp) {
    	var r=inp.value.split(/\W+/g),
    	yr= Number(( (r[2]>30?19:20) +''+ r[2] ).slice(-4)) , mmx=r[0], dd=r[1];
    
    	if (yr < 1910 || yr > new Date().getFullYear()) { 
    		inform(inp, r.join(" / ") + "\n\n" + " >> "+yr+" <<"   );
    		return false;
    	}
    
    	if (dd<1 || dd>31 || parseInt(dd)!=+dd ) { 
    		inform(inp, r.join(" / ") + "\n\n" + " >> "+dd+" <<"   );
    		return false;
    	}
    
    
    	mm = mmx - 1; // remember that in Javascript date objects the months are 0-11
    	var nd = new Date(yr, mm, dd);
    
    	var ndmm = nd.getMonth();
    	if (ndmm != mm) {
    		inform(inp, r.join(" / ") + "\n\n" + " >> "+mmx+" <<"   );
    		return false;
    	} else {
    		inform(inp, "");
    	}
    } /* end checkValidDate() */
    
    
    
    
    </script>
    
    </body>
    </html>
    Last edited by rnd me; 12-08-2012 at 11:14 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  5. #20
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    This is tempting me to ignore (most of) them, use JS, but (of course) rely on server-side validation.
    I am not advising anyone to ignore HTML5, I was merely reflecting my own experience. I am happy to adjust my statement to "dont count on them" if it helps .

    What I will continue to do is to apply HTML5 attributes, and test in different browsers. I will probably need to tweak some css. If I'm still not happy with the look and/or behaviour I might remove some of the HTML5 attributes.

    Andy.

    On reflection, I should have said "some of.." rather than "most of.."
    Last edited by AndrewGSW; 12-08-2012 at 11:31 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  6. #21
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Still does nothing for me in IE9 if I just click test..
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  7. #22
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Here...A complete date validation that works from 1900 to 2099, excepting only that it allows "2/29/1900".

    I could even fix that but it's a real pain for such a minor thing.

    Test it out.

    The regular expression is "exploded" as a comment below the rest of the HTML to make it clearer how it works.

    I got rid of the "test" button since it's irrelevant to this code.

    Oh...and tested in Chrome, only, so far.
    EDIT: Tested in Firefox. Works. Tested in MSIE 9. Doesn't do a thing, as we knew it wouldn't.

    Code:
    <!DOCTYPE html><html>
    <head>
    	<title>html5 form test</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      [id]:valid, [id][valid]{ background:#cfc; }
      [id]:invalid, [id][invalid] { background:#fcc; outline: 0; box-shadow: none; }
    </style>
    
    </head>
    <body>
    <h1>htm5 form validation test </h1>
    <form onsubmit="return false;">
    	<label for="datedue">
    		<b>Date Due</b>
    		<input type="text" name="datedue" id="datedue" placeholder="12/31/2000" title="12/31/2000"
    		 pattern="^(((0?[13578]|1[02])[.\/](0?[1-9]|[12]\d|3[01])|(0?[469]|11)[.\/](0?[1-9]|[12]\d|30))[.\/](19|20)\d\d)|((0?2[.\/](0?[1-9]|1\d|2[0-8])[.\/](19|20)([02468][1235679]|[13579][01345789]))|(0?2[.\/](0?[1-9]|1\d|2[0-9])[.\/](19|20)([02468][048]|[13579][26])))$" 
                     required autofocus
    		/>
    	</label>
    </form>
    
    </body>
    <!--
    ^
    (
      (
        (0?[13578]|1[02])[.\/](0?[1-9]|[12]\d|3[01])
        |
        (0?[469]|11)[.\/](0?[1-9]|[12]\d|30)
      )
      [.\/](19|20)\d\d
     )|(
      (0?2[.\/](0?[1-9]|1\d|2[0-8])[.\/](19|20)([02468][1235679]|[13579][01345789]))
      |
      (0?2[.\/](0?[1-9]|1\d|2[0-9])[.\/](19|20)([02468][048]|[13579][26]))
     )
    )
    $
    -->
    </html>
    Last edited by Old Pedant; 12-08-2012 at 11:50 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  8. #23
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    excepting only that it allows "2/29/1900"
    in the Excel world that is a valid date
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  9. #24
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Did you see my proposal ? It authorizes 1 1 2013, 01/01/2013, 1 - 1 - 2013 or another New Year 01012013... But 2 29 2013 or 13122014 are forbidden !

    Otherwise I am not certain that all the innovations go in the right direction. A few years ago, Ayatollahs of W3C wanted to impose us the XHTML, every profession had to have its DTD, It was really the way of future...
    Apparently the reverse gear is on the way with the HTML5 !

    Now, its very difficult to reload a page. Let us regret that forms are sometimes stiffer on the web than on the paper. It would be necessary to click outside, on labels, while these should be inside (In particular on the small screens of telephones) !

    Then let us wait a little that all this settles... Let us hope only that the best ideas will be adopted !

    EDIT : But please allow a date even if there is a unfortunate space before or after !
    Last edited by 007julien; 12-09-2012 at 01:47 AM.

  10. #25
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,313
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Old Pedant View Post
    .

    Oh...and tested in Chrome, only, so far.
    EDIT: Tested in Firefox. Works. Tested in MSIE 9. Doesn't do a thing, as we knew it wouldn't.
    So useless, sadly. I do not defend IE, but simply state that something which does not work in IE is not useful.

    rnd me's script is fine, but for the life of me I do not see any real advantage over what I regularly use.
    Last edited by Philip M; 12-09-2012 at 12:25 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. #26
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,664
    Thanks
    80
    Thanked 4,643 Times in 4,605 Posts
    Well, I will point out that my same regular expression could be used in JavaScript to validate the same dates.

    Maybe a hacik?
    Code:
    		<input type="text" name="datedue" id="datedue" placeholder="12/31/2000" title="12/31/2000"
    		 pattern="^(((0?[13578]|1[02])[.\/](0?[1-9]|[12]\d|3[01])|(0?[469]|11)[.\/](0?[1-9]|[12]\d|30))[.\/](19|20)\d\d)|((0?2[.\/](0?[1-9]|1\d|2[0-8])[.\/](19|20)([02468][1235679]|[13579][01345789]))|(0?2[.\/](0?[1-9]|1\d|2[0-9])[.\/](19|20)([02468][048]|[13579][26])))$" 
                     required autofocus
    		 onchange="this.style.backgroundColor='lime';
                     if (! (new RegExp(this.getAttribute('pattern'),'i') ).test(this.value) ) 
                     { this.style.backgroundColor='pink';this.focus();}
                    "
    		/>
    That works in IE, even. <grin/> (Redundant in other browsers, but so what?)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  12. #27
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, I will point out that my same regular expression could be used in JavaScript to validate the same dates.
    See http://javascriptexample.net/domform12.php for an unobtrusive way to process the pattern attribute in all browsers and not just those that support it without JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


 
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
  •