# JavaScript date field validation

**URL:** <https://forums.knack.com/t/javascript-date-field-validation/12851>\
**Category:** Get Answers\
**Created:** [July 31, 2022, 5:26am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851 "2022-07-31T05:26:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arjun1](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Arjun1](https://forums.knack.com/u/Arjun1)\
**Post date:** [July 31, 2022, 5:26am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/1 "2022-07-31T05:26:47Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Arjun1](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Arjun1](https://forums.knack.com/u/Arjun1)\
**Post date:** [August 1, 2022, 11:37am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/2 "2022-08-01T11:37:25Z")

</div>

This forum is dead.

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [August 1, 2022, 11:50pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/3 "2022-08-01T23:50:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Arjun1](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Arjun1](https://forums.knack.com/u/Arjun1)\
**Post date:** [August 2, 2022, 12:34am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/4 "2022-08-02T00:34:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [August 2, 2022, 1:38am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/5 "2022-08-02T01:38:15Z")

</div>

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:

```auto
// 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. 👍

---

<div class="post-metadata">

**Author:** ![Arjun1](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Arjun1](https://forums.knack.com/u/Arjun1)\
**Post date:** [August 17, 2022, 12:07pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/6 "2022-08-17T12:07:26Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![Arjun1](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Arjun1](https://forums.knack.com/u/Arjun1)\
**Post date:** [August 17, 2022, 12:37pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/7 "2022-08-17T12:37:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [August 17, 2022, 5:04pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/8 "2022-08-17T17:04:56Z")

</div>

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:

> **[Educative Answers - Trusted Answers to Developer Questions](https://www.educative.io/answers/what-are-the-different-ways-to-select-dom-elements-in-javascript)**
>
> Level up your coding skills. No more passive learning. Interactive in-browser environments keep you engaged and test your progress as you go.

Knack uses a JavaScript library called jQuery. This resource may help you as well:

> **[jQuery Selectors](https://www.w3schools.com/jquery/jquery_selectors.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Kristina](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@Kristina](https://forums.knack.com/u/Kristina)\
**Post date:** [October 6, 2022, 7:21pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/9 "2022-10-06T19:21:31Z")

</div>

> [@KnackPros](#):
>
> How to compare two date values with JavaScript

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:

```auto
// 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
    } 
  })
})

```

---

<div class="post-metadata">

**Author:** ![LeighBerre96926](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/leighberre96926/32/4896_2.png) [@LeighBerre96926](https://forums.knack.com/u/LeighBerre96926)\
**Post date:** [January 15, 2024, 6:02am UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/10 "2024-01-15T06:02:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Remote](https://avatars.discourse-cdn.com/v4/letter/r/f08c70/32.png) [@Remote](https://forums.knack.com/u/Remote)\
**Post date:** [February 18, 2026, 9:28pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/11 "2026-02-18T21:28:57Z")

</div>

Should this work for a date AND time? For example, February 20, 2026 8PM is the first field and February 20, 2026 6AM is the second field. I would expect this to be rejected. A second example: February 20, 2026 11AM is the first field and February 20, 2026 4PM is the second field. I would expect this to be accepted. The first alert displays the date only. I added a second alert at then end of Step 2; it shows a numeric indicating there are no hours/minutes/etc. as part of either date. Please advise. Thank you very much!

---

<div class="post-metadata">

**Author:** ![Remote](https://avatars.discourse-cdn.com/v4/letter/r/f08c70/32.png) [@Remote](https://forums.knack.com/u/Remote)\
**Post date:** [February 19, 2026, 9:06pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/12 "2026-02-19T21:06:19Z")

</div>

I didn’t know that time was a separate field on input. See **modifications**. This is my first attempt at JavaScript so it may not be efficient. It only works because the time is set to 24 hours. I placed some alerts for troubleshooting but I’ll take them out. The second date cannot be the same as the first date.

// Prevent submission when Event End Date/Time is less than Event Start Date/Time (Equal is ok)  
$(document).on(‘knack-view-render.view\_5’, function (event, view, data) {

$(“#view\_5 .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\_5-’ + ‘field\_129’).val() **+ ’ ’ + $(‘input#view\_5-’ + ‘field\_129-time’).val()**  
var dateTwo = $(‘input#view\_5-’ + ‘field\_130’).val() **+ ’ ’ + $(‘input#view\_5-’ + ‘field\_130-time’).val()**

```auto
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()
//
alert('The first date is ' + dateOne + ' and the second date is ' + dateTwo + '.')

// 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.')
}

```

})  
})

---

<div class="post-metadata">

**Author:** ![Sophie](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@Sophie](https://forums.knack.com/u/Sophie)\
**Post date:** [March 17, 2026, 2:51pm UTC](https://forums.knack.com/t/javascript-date-field-validation/12851/13 "2026-03-17T14:51:15Z")

</div>

I’ve been trying to get a solid date validation working without breaking the form submission, so this script is exactly what I was looking for. Knack’s native date settings are a bit limited when you need to block specific ranges, so doing it via Javascript seems like the only real way to go. Thanks for sharing the code snippet, it saved me a lot of trial and error today.