Question
Validating MM/YYYY field for format and that input does not exceed current MM/YYYY
+1I am trying to create a question with one field for MM/YYYY. I would like to validate the field so it:
1. Only accepts numbers in that format
2. Only accepts 01-12 as inputs for the MM component
3. Does not allow input of any year before 1990
4. Does not allow input of any MM/YYYY that exceeds the current MM/YYYY
Seeking guidance on how to best create this question with this validation.
+7Hello,
What question type are you working with? This will change the possibilities of what validation you have available to you. Thanks!
+1I was thinking it'd be a text entry field but if there is a better/easier way to go, I am flexible. Thanks!
+7I was just thinking we use the custom content validation inside Side-by-Side questions quite often. This would get you about half way, you'd have to use JavaScript probably mixed with some regex to get the rest of the way.
In case you're unfamiliar with S-b-S validation, choose the Column Options drop down and select Text Entry Validation. This gives you the option to either validate by date, though it wont' give you the granular options you want. This would satisfy your #2 requirement. I think you'd be better off going with Numeric values only and using regex for the rest, breaking MM into a variable and YYYY into a second variable to do the validation. This might also be best achieved by having the user enter MM and YYYY in 2 different textboxes.
If you're interested in the regex method, I may be able to throw something together that would fit your needs. Hope this helps!
+1Ok, I've set up the side-by-side Q. I set it so the fields must have numerical values and will validate (I think) that MM will be 01-12 and YYYY will be 1995-2020:
!
!
Problem with this method is validating that MM & YYYY are not in the future, right?
!
Problem with this method is validating that MM & YYYY are not in the future, right?
+27@PST,
Have you considered using a date picker like flatpickr?
A script to do what you asked for is quite complex. I happen to have created a script that does exactly that and lot more (other date formats, validation against multiple dates, other question types, other field types, etc.), but I don't give it away (it isn't fair to my clients that help pay for development). However, you could contact me privately if interested. Here is an example applied to your question:
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_3XlkG9ICwiu0jEV?Q_SurveyVersionID=current&Q_CHL=preview
+7Correct, no validation is preventing users from entering a date in the future.... So here's what I came up with toying around to finish out a possible solution.
Here's my code:
`Qualtrics.SurveyEngine.addOnload(function()
{
var MM = document.getElementById("QR~QID2#1~1~1~TEXT");
var YYYY = document.getElementById("QR~QID2#2~1~1~TEXT");
var date = new Date();
var month = date.getMonth()+1;
var year = date.getYear()+1900;
// Check Month for future state
MM.addEventListener('change', function() {
var MMInput = MM.value;
if (MMInput > month) {
alert("The month entered is in the future. Please enter past/current month");
}
});
// Check Year for future state
YYYY.addEventListener('change', function() {
var YYYYInput = YYYY.value;
if(YYYYInput > year) {
alert("The year entered is in the future. Please enter past/current year")
}
});
});`
So you'll to inspect your two text boxes and enter the values in the first two variables. That should be the only code you need to edit. Currently, this throws an alert at the top of the page letting the user know the value they entered is not acceptable, but you can tweak the action that happens to your liking. If you want to change the error text, it's the alert("") line that is displayed.
Any questions, let me know!
+1@JeremyK - I added your code to my date Q, which is currently 2 text fields:
!
And this is the code I put in that Q's JS. I put "${q://QID7/ChoiceTextEntryValue/1}" and "${q://QID7/ChoiceTextEntryValue/2}" to define the variables:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var MM = document.getElementById("${q://QID7/ChoiceTextEntryValue/1}");
var YYYY = document.getElementById("${q://QID7/ChoiceTextEntryValue/2}");
var date = new Date();
var month = date.getMonth()+1;
var year = date.getYear()+1900;
// Check Month for future state
MM.addEventListener('change', function() {
var MMInput = MM.value;
if (MMInput > month) {
alert("The month entered is in the future. Please enter past/current month");
}
});
// Check Year for future state
YYYY.addEventListener('change', function() {
var YYYYInput = YYYY.value;
if(YYYYInput > year) {
alert("The year entered is in the future. Please enter past/current year")
}
});
});
The validation isn't working - do you know what I'm doing wrong? Thank you!
And this is the code I put in that Q's JS. I put "${q://QID7/ChoiceTextEntryValue/1}" and "${q://QID7/ChoiceTextEntryValue/2}" to define the variables:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var MM = document.getElementById("${q://QID7/ChoiceTextEntryValue/1}");
var YYYY = document.getElementById("${q://QID7/ChoiceTextEntryValue/2}");
var date = new Date();
var month = date.getMonth()+1;
var year = date.getYear()+1900;
// Check Month for future state
MM.addEventListener('change', function() {
var MMInput = MM.value;
if (MMInput > month) {
alert("The month entered is in the future. Please enter past/current month");
}
});
// Check Year for future state
YYYY.addEventListener('change', function() {
var YYYYInput = YYYY.value;
if(YYYYInput > year) {
alert("The year entered is in the future. Please enter past/current year")
}
});
});
The validation isn't working - do you know what I'm doing wrong? Thank you!+27I updated the demo to include a flatpickr example:
https://marketinview.ca1.qualtrics.com/jfe/preview/SV_3XlkG9ICwiu0jEV?Q_SurveyVersionID=current&Q_CHL=preview
flatpickr code is:
```
Qualtrics.SurveyEngine.addOnload(function () {
var input = jQuery("#"+this.questionId+" .InputText");
input.attr("placeholder", "MM/YYYY");
input.flatpickr({
dateFormat: "m/Y",
minDate: "01/1990",
maxDate: "${date://CurrentDate/m}/${date://CurrentDate/Y}"
});
});
```
+1Thank you, @TomG !
flatpickr would be a great solution - but for this particular instance, I don't want to show a calendar; I only want to allow the user to type in a MM/YYYY.
+7@PST,
I think you're script can't see the text boxes because of those 2 variables. You've got ${q://QID7/ChoiceTextEntryValue/1}, but that's embedded data based on something the user enters and will change based on who's taking the survey. The 2 variables for MM and YYYY are going to look like QR~QID2#1~1~1~TEXT as in my example above. I dynamically build these values out in my surveys, but for a down-and-dirty solution, I thought hard-coded them would be acceptable.
To get the element Id's, you'll want to right-click the MM textbox in survey preview mode and choose the last option from the context menu, _Inspect_. In Chrome, this brings up your _Inspect Elements_ pane on the right side of your window. Simply copy the id of the highlighted object and paste the id string in the MM variable in the JS code . You'll want to repeat this process for the YYYY textbox as well. Save the JavaScript in the Edit mode and click the _Restart Survey_ button in preview to test your changes.
Hope this clears it up for you!
-Jeremy
+1@JeremyK Apologies if I'm missing something obvious. This is the code now:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
var MM = document.getElementById("QR~QID7~1~TEXT}");
var YYYY = document.getElementById("QR~QID7~2~TEXT}");
var date = new Date();
var month = date.getMonth()+1;
var year = date.getYear()+1900;
// Check Month for future state
MM.addEventListener('change', function() {
var MMInput = MM.value;
if (MMInput > month) {
alert("The month entered is in the future. Please enter past/current month");
}
});
// Check Year for future state
YYYY.addEventListener('change', function() {
var YYYYInput = YYYY.value;
if(YYYYInput > year) {
alert("The year entered is in the future. Please enter past/current year")
}
});
});
Validation is not working. Should "Validation Type" in the right sidebar be set to "None"?
Here is a link to the survey: https://upenn.co1.qualtrics.com/jfe/form/SV_a3JPyglOIxQqr41
+7Personally, I love @TomG's solution using flatpickr and JS. I didn't know that was an option, but I made sure to save to code off in case I ever need it. A quick search on the community for flatpickr and the second search hit was how to implement it, again from Tom. With his solution, you can keep your MM/YYYY all under 1 text box and in a super-clean format. A quick Google search for flatpickr reveals their website as the top hit where you can see examples, syntax, and code options. I highly recommend checking that out. Thanks for the input, Tom! Really good stuff.
+7@PST, I believe you have an extra squiggly bracket in your variable names between the double quotes. Try removing that orphaned bracket and it should work....
Also, just throwing this out as an option which I though about this morning, but you could do this with S-b-S dropdowns too. Just wanted to pitch the idea out there, whatever works best for you *thumbs up*.
PST
Albeit an old post I just wanted to let you know I've create a month date picker using flatpickr. It lets you pick the month easily.
https://www.qualtrics.com/community/discussion/8850/embedding-flatpickr-into-the-surveyThanks
Rod Pestell
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.