I’m trying to validate a date field based on another date field. (Ie date field 1 needs to be prior to date field 2). I found the below example code from Knack docs but it doesn’t really help with date fields - can Anyone help please? Thank you
// Replace view_1 and field_1 with your view and field keys
// Use on all themes except the Knack Standard theme
$(document).on('knack-view-render.view_1', function(event, view, data) {
$("#view_1 .kn-submit input[type=submit]").on("click", function() {
// If this value in the form doesn't equal "SpecificValue" then prevent the form from submitting
if ($('#view_1 #field_1').val() != "SpecificValue") {
alert ("These are not the droids you are looking for.");
return false;
}
})
});
I might be able to help. To clarify, are you a programmer who is learning how to write code, or a non-programmer wanting someone to write the code for you? It will help us provide you with the right type of help.
If date 1 is not prior to date 2, then stop the form submission.
Here’s how that code looks:
// Example for Arjun
// Replace the view number and field numbers with yours
$(document).on('knack-view-render.view_29', function (event, view, data) {
$("#view_29 .kn-submit button[type=submit]").on("click", function() {
// Step 1: Get the value of each date. You'll need to create a reference to each Date input. Look in the HTML to find the selector for each input.
var dateOne = $('input#view_29-' + 'field_31').val()
var dateTwo = $('input#view_29-' + 'field_170').val()
alert('The first date is ' + dateOne + ' and the second date is ' + dateTwo + '.')
// Step 2: Compare the dates. To be compared as "earlier" or "later", we need to convert them into a format such as JavaScript Date object, UNIX timestamp, etc.
dateOne = new Date(dateOne).getTime()
dateTwo = new Date(dateTwo).getTime()
// Step 3: If date two is prior (or equal) to date one, then stop the form submission.
if (dateTwo <= dateOne) {
alert('Date one should be prior to date two. Do not submit the form.')
// Stop the form from submitting
return false
} else {
alert('Date one is prior to date two. It is OK to submit the form.')
}
})
})
There are other ways to write this code, but I’ve kept this example simple for learning purposes. To learn more about coding, try the following searches:
“How to compare two date values with JavaScript”
“How to stop form submission with JavaScript”
Those things are part of JavaScript and not specific to Knack.
I think I understand most of it, except stuck on your comment: “Look in the HTML to find the selector for each input” could you point me in the right direction for me here pls? thank you very much
I think I understand most of it, except stuck on your comment: “Look in the HTML to find the selector for each input” could you point me in the right direction for me here pls? thank you very much
The goal is to select the HTML elements; there are different ways. This may help you:
Knack uses a JavaScript library called jQuery. This resource may help you as well:
This code worked great for me. Though it would be great if Knack would allow you to do this within conditional rules. No matter how I reworked the conditional or submit rules, I could not get Knack to allow a user to submit two date fields with the same date, but prevent saving when one date was before another date. I altered the code to allow for dates to be equal:
// Prevent saving Add Form if End date is before Start Date.
$(document).on('knack-view-render.view_81', function (event, view, data) {
$("#view_81 .kn-submit button[type=submit]").on("click", function() {
// Step 1: Get the value of each date by referencing each Date input.
var dateOne = $('input#view_81-' + 'field_137').val()
var dateTwo = $('input#view_81-' + 'field_138').val()
// Step 2: Convert dates into a format such as JavaScript Date object, UNIX timestamp, etc.
dateOne = new Date(dateOne).getTime()
dateTwo = new Date(dateTwo).getTime()
// Step 3: If date two is prior to date one, then stop the form submission.
if (dateTwo < dateOne) {
alert('DATA ENTRY ERROR: The End Date occurs after the Start Date. Please correct date fields before submitting the form.')
return false
}
})
})
Sorry to dredge up an old thread, but I’ve tried using this code and I found it only works if the date format is “US” time, i.e. mm/dd/yyyy - not “Everyone else except Japan” time i.e. dd/mm/yyyy.
Does anyone know how to tweak the above code to work with dd/mm/yyyy time fields?
