JavaScript date field validation

Hi all,

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;
    }
  })
});

1 Like

This forum is dead.

Hi @Arjun1

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.

Thank you for the reply.

I am learning how to code. I have limited JavaScript experience, but eager to learn instead of paying someone for the code.

Many thanks

So there are 3 steps.

  1. Get the value of the date inputs.
  2. Compare the date inputs.
  3. 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.

Hope this helped. :+1:

This is amazing. Thank you so much for taking the time to provide me with this information. I will try it out and let you know how it goes!!

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

Re:

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
    } 
  })
})
1 Like