Validation fails when putting step="1" in a "datetime-local" input type

[rigobauer]

Subject of the issue

When I put step="1" in a datetime-local input field to show seconds, if I'm validating that field with the plugin (just "required", for example), I get a javascript error saying "Step attribute on input type datetime-local is not supported". If I put this step="1" in a field that is not being validated, it works without problems.

Your environment

• jquery-validate 1.16.0
• Chrome (Versión 59.0.3071.115 (Build oficial) (64 bits))

Steps to reproduce

Just create a datetime-local input field with step="1", and try to validate it with required.

Expected behaviour

When you put step="1" in a datetime-local field, the field shows seconds (by default you can just see minutes because default value is step="60")

Actual behaviour

If the step="1" is in a field that is being validated with the plugin, you get a Javascript error with message "Step attribute on input type datetime-local is not supported".

[brunoalreis]

Hi,

Have same issue here. Is there any known workaround?

Thanks.

[staabm]

please provide a jsfiddle showing the problem, thx.

[brunoalreis]

Here is the example:

https://jsfiddle.net/na6Lqpar/

To reproduce the problem, click in the first input then in the second and check console errors.

Thanks.

[staabm]

awesome, thx

[jameswilson]

I've setup a very complete jsbin to compare native html5 validation with each date type that demonstrates several issues related to min/max calculations and breakage due to the "step" attribute.

https://jsfiddle.net/w8jpygr2/

[barts2108]

ran into this issue recently, and due to the exception thrown, another field won't validate anymore.

As this is a very long lasting issue already, I have created a solution for my case : step="1" on a "time" input field using "hh:mm:ss" as format.

		// https://jqueryvalidation.org/step-method/
		step: function( value, element, param ) {
			var type = $( element ).attr( "type" ),
				errorMessage = "Step attribute on input type " + type + " is not supported.",
				supportedTypes = [ "text", "number", "range", "time" ],
				re = new RegExp( "\\b" + type + "\\b" ),
				notSupported = type && !re.test( supportedTypes.join() ),
				decimalPlaces = function( num ) {
					var match = ( "" + num ).match( /(?:\.(\d+))?$/ );
					if ( !match ) {
						return 0;
					}

					// Number of digits right of decimal point.
					return match[ 1 ] ? match[ 1 ].length : 0;
				},
				toInt = function (num) {
					if (type && re.test("time")) {
						var a = value.split(':');
						return (a[0]*3600 + a[1]*60 + a[2]*1);
					}

					return Math.round( num * Math.pow( 10, decimals ) );
				},
				valid = true,
				decimals;

rest of the code omitted as it is not changed.

I added the "time" to the supportedTypes, and I added code in the toInt to handle the time.
I am aware that this is not a full solution, but maybe it'll help others, or maybe it helps to get this issue solved.