1. jQuery Date Validation (valid dates that are really valid dates)

    Date validation in FileMaker is automatic:  just set a field’s Type to “Date” and the user can’t even exit the field unless the contents are a valid date (or the field is empty).

    On the Web, we’ve got to check for valid dates before submitting to FileMaker or we’ll receive an error.  JavaScript is a great way to validate data for users before they actually submit their data.

    There’s an awesome jQuery validation plugin, conveniently called Validation.  It provides a really easy way to set up the specific validations we may need on various fields in our forms, by setting an input’s class to things like required, email, date, etc., like this:

    <input type="text" name="name" value="" class="required" />
    <input type="text" name="email" value="" class="required email" />
    <input type="text" name="startDate" value="" class="date" />
    

    Unfortunately, the date validation isn’t very helpful as-is because it doesn’t really test for valid dates.

    As it states in the documentation:

    "Uses JavaScripts built-in Date to test if the date is valid, and does therefore no sanity checks. Only the format must be valid, not the actual date, eg 30/30/2008 is a valid date."

    But what good is date validation that accepts 30/30/2008??  Or  123/45/67890?  Fortunately, it’s not hard to make this plugin check for really valid dates. 

    The plugin comes with a way to add your own validations, as well as an “additional-methods” file that contains a number of other validations already written.  In that file, there’s a “dateITA” function that does check for a really valid date, but it is in non-US (a.k.a. most-of-the-world) format of dd/mmy/yyyy.  Just a couple changes are necessary to modify this (including from the original Italian ;) so that the plugin now validates US-format dates mm/dd/yyyy:

    $(document).ready(function(){
    	
    	// dateUS function, modified from dateITA in additional-methods.js
    	// makes sure dates are valid (& US-format: m/d/yyyy)
    	jQuery.validator.addMethod(
    		"dateUS",
    		function(value, element) {
    			var check = false;
    			var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    			if( re.test(value)){
    				var adata = value.split('/');
    				var mm = parseInt(adata[0],10); // was gg (giorno / day)
    				var dd = parseInt(adata[1],10); // was mm (mese / month)
    				var yyyy = parseInt(adata[2],10); // was aaaa (anno / year)
    				var xdata = new Date(yyyy,mm-1,dd);
    				if ( ( xdata.getFullYear() == yyyy ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == dd ) )
    					check = true;
    				else
    					check = false;
    			} else
    				check = false;
    			return this.optional(element) || check;
    		}, 
    		"Please enter a valid date (m/d/yyyy)"
    	);
    	
    	// attach Validate plugin to form
    	$("#form").validate();
    
    });
    

    Then just change the function call to “dateUS”:

    <input type="text" name="startDate" value="" class="dateUS" />
    

    and your date validation will check for really valid dates!

    Go ahead, try it out:


    (a quick modification of the included demo)

    FWIW:
    If dates are the only thing you need to validate and you’re already using the jQuery UI Datepicker, you can avoid using a validation plugin altogether just by following these instructions (see my comment too so “1/2/3” isn’t accepted as valid).

    Note:
    Unless you’re sure all your users will have JavaScript enabled, you’ll need to also validate data in the PHP processing before submitting to FileMaker.  But that’s another post ;-)

    jQuery code samples PHP

    Posted July 21, 2011

  2. 1 note
    1. jsfmp posted this
    blog comments powered by Disqus

© Copyright Joel Shapiro unless otherwise noted  :  FileMaker is a trademark of FileMaker, Inc., registered in the U.S. and other countries.