You are viewing limited content. For full access, please sign in.

Question

Question

value is required on timepicker field

Forms Version 10 How To
Updated March 15, 2018
asked on March 12, 2018 • Show version history

Hi I have the above error and I am using a single line field with 'timepicker' and the field is required.  If a user clicks in the field the scroll window appears for them to select a time.  However, when they scroll past what is displayed the 'value is required' shows up.  

The form does submit. However, I don't want to confuse users with the message. 

 

Any ideas???

0 0

Replies

replied on March 13, 2018

The behavior that I'm seeing when I test it is that if I select a time and then tab or click away, it accepts the value. If I don't select a value, and then tab or click away, it complains about the field being required. If I then put a value in, it doesn't clear the error.

To resolve it, I had to add an event to check for the time changing and revalidate.

$('#Field49').on('changeTime', function() {
    $("#Field49").trigger('updatevalidation')
});

 

1 0
replied on March 13, 2018

i don't think i'm implementing this properly.  I'm still getting the error.  

0 0
replied on August 25, 2021

I was hitting the same issue.  If my single-line field using the timepicker js was set to required, upon selecting a value from the timepicker scroll the field would complain that a value is required even though you selected a value.  I added the code Devin shared to my CSS and that resolved the issue for me.  Thanks, Devin!

replied on March 13, 2018

Hi! This is a great question. Could you post some details about how the field is implemented? Is it just a vanilla field built with the designer, or is there any custom scripting involved? Screenshots and code snippets are always a good thing.

0 0
replied on March 13, 2018 • Show version history

It's a required single line field with css. 

//Time Picker 
$(document).ready(function () {
    $.getScript('/forms/js/jquery.timepicker.js', function() {
      $('.dprTime input').timepicker({'step': 30, 'scrollDefault': 'now'});
      $('.rtTime input').timepicker({'step': 30, 'scrollDefault': 'now'});
    });
});
/*
time picker formating
*/
.ui-timepicker-wrapper {
	overflow-y: auto;
	height: 150px;
	width: 6.5em;
	background: #fff;
	border: 1px solid #ddd;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
	outline: none;
	z-index: 10001;
	margin: 0;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration {
	width: 13em;
}

.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-15,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
	width: 11em;
}

.ui-timepicker-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ui-timepicker-duration {
	margin-left: 5px; color: #888;
}

.ui-timepicker-list:hover .ui-timepicker-duration {
	color: #888;
}

.ui-timepicker-list li {
	padding: 3px 0 3px 5px;
	cursor: pointer;
	white-space: nowrap;
	color: #000;
	list-style: none;
	margin: 0;
}

.ui-timepicker-list:hover .ui-timepicker-selected {
	background: #fff; color: #000;
}

li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: #1980EC; color: #fff;
}

li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: #ccc;
}

.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: #888;
	cursor: default;
}

.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	background: #f2f2f2;
}

 

singlelinefield.png
singlelinefield.png (25.05 KB)
Download
0 0
replied on March 13, 2018

The behavior that I'm seeing when I test it is that if I select a time and then tab or click away, it accepts the value. If I don't select a value, and then tab or click away, it complains about the field being required. If I then put a value in, it doesn't clear the error.

To resolve it, I had to add an event to check for the time changing and revalidate.

$('#Field49').on('changeTime', function() {
    $("#Field49").trigger('updatevalidation')
});

 

replied on March 13, 2018 • Show version history

I will give it a try and update the thread.  Thank you!  

0 0
replied on March 15, 2018

no luck getting it to work.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...