jQuery Validate: Date validation when not required

[Russinating]

I've got an input field for a date that is NOT required, but if filled must be in the correct format.

I've got (with irrelevant bits snipped out):

$.validator.addMethod("ukDate",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Please enter a date in the format DD/MM/YYYY."
);

$(document).ready(function() {	
var validator = $("#form").validate({
rules: {
ukdate: {
required:false,
ukDate:true,
},
},
});
});

However submitting when it's blank brings up the error. I'm useless with Regex so how do I add an 'OR blank' to the ukDate function?

 

[Pho]

This works for me:

jQuery.validator.addMethod(
	"dateITA",
	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 gg = parseInt(adata[0],10);
			var mm = parseInt(adata[1],10);
			var aaaa = parseInt(adata[2],10);
			var xdata = new Date(aaaa,mm-1,gg);
			if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
				check = true;
			else
				check = false;
		} else
			check = false;
		return this.optional(element) || check;
	}, 
	"Please enter a correct date"
);

$("#form").validate({
	rules: {
		ukdate: {
			required: false,
			dateITA: true	// dd/mm/yyyy
		}
	}

dateITA is from the additional-methods.js file: http://ajax.microsoft.com/ajax/jquery.validate/1.7/additional-methods.js

 

[Russinating]

Thanks Pho, but doesn't seem to work fro me. Where exactly do I need to put the dateITA method? Tried replacing jQuery.validator with $.validator as per the previous function but doesn't worth either.

<link rel="stylesheet" type="text/css" media="screen" href="/css/jqtransform.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/scripts/jquery.jqtransform.js"></script>
<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
  <script>
  $.validator.addMethod("dateITA",
    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 gg = parseInt(adata[0],10);
            var mm = parseInt(adata[1],10);
            var aaaa = parseInt(adata[2],10);
            var xdata = new Date(aaaa,mm-1,gg);
            if ( ( xdata.getFullYear() == aaaa ) && ( xdata.getMonth () == mm - 1 ) && ( xdata.getDate() == gg ) )
                check = true;
            else
                check = false;
        } else
            check = false;
        return this.optional(element) || check;
    }, 
    "Please enter a date in the format DD/MM/YYYY"
);  
$(document).ready(function() {	
	var validator = $("#form").validate({
		rules: {
			title: "required",
			category: "required",
			region: "required",
			regionpreference: "required",
			budget: {
				required: false,
				digits: true,
				maxlength: 11,
			},
			ukdate: {
				required:false,
				dateITA:true,
			},
		},
		messages: {
			title: "Enter a job title",
			category: "Select a category",
			region: "Select a region",
			regionpreference: "Select your region preference",
			budget: "Enter your business's postcode",
			region: "Please select a region",
			budget: {
				digits: "Your budget must be digits only",
				maxlength: "Your budget must be a maximum of 11 digits",
			},
		},
		errorPlacement: function(error, element) {
			if ( element.is(":radio") )
				error.appendTo( element.parent().next().next() );
			else if ( element.is(":checkbox") )
				error.appendTo ( element.next() );
			else
				error.appendTo( element.parent().next() );
		},
	});
});
  </script>

 

[Pho]

Try using the latest version of jQuery Validate instead of the one hosted on jQuery:
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js

If that doesn't work, we'll try plan b .

 

[Russinating]

Plan B I'm afraid .

 

[Pho]

Hmm.. is it showing anything in the error console?

Can you upload a working (or rather, not working ) example somewhere so I can take a proper look?

 

[FabienO]

Why not just use a HTML option for each date.

Or do what most sites do and fill the date part with an example when document loads.

 

[Tripnologist]

Or do what most sites do and fill the date part with an example when document loads.

Those sites will still have validation in place to ensure the date is sent to the server in the correct format.

 

[Russinating]

We fixed it . OcUK stripped the code down so copying it directly from the validate plugin fixed the problem.

 

[FabienO]

Those sites will still have validation in place to ensure the date is sent to the server in the correct format.

True, but in terms of forcing the correct format it works. Also Javasript validation vs PHP can be an issue. I usually do both.