📅 Calculate Balance Days in Joget Forms with JavaScript

#joget #javascript #validation #lowcode

1. Overview

This article shows how to calculate leave or balance days inside a Joget form using JavaScript. The script reads date fields, calculates the number of selected days, validates against available balance, and updates the remaining balance field.

2. How It Works

Make the calculated field read-only.
Listen for changes on start_date, end_date, request_type, and total_days.
Calculate days between the selected dates.
Compare requested days against the available balance.
Clear invalid input when the user exceeds the balance.

3. Where to Use in Joget

Form Builder: custom HTML element or form-level JavaScript.
Userview: forms where users submit leave or allocation requests.
Workflow Builder: request forms before approval routing begins.

4. Full Code

<script type="text/javascript">
$(document).ready( function(){

    $('[name=requested_days]').prop("readonly", true);

    //Calculate days taken
    $('[name$=end_date]').change(function() {

        var myDate1=$('[name$=start_date]').val();
        var myDate2=$('[name$=end_date]').val();
        var myDaysTaken = new Date(Date.parse(myDate2) - Date.parse(myDate1));
        myDaysTaken = (myDaysTaken/1000/60/60/24)+1;
        $('[name$=requested_days]').val(myDaysTaken);

        //Check if sufficient leave balance
        var myLeaveBal = $('[name$=available_days]').val();
        if (myLeaveBal < myDaysTaken) {
            alert("You don't have enough leave balance to apply "+myDaysTaken+" days!");
            $('[name$=end_date]').val('');
            $('[name$=requested_days]').val('');
            $('[name$=end_date]').focus();
            document.getElementById("total_leave_days").style.display = "none";
            document.getElementById("EntitlesDays").style.display = "none";
        }
    });

    function calculatebalance_days(totalDays) {
      var balanceDays = totalDays == '' || totalDays == null ?
        parseInt($('[name=total_leave_days]').val()) - parseInt($('#requested_days').val()) : 
        parseInt(totalDays) - parseInt($('#requested_days').val()) ;
      $('#balance_days').val(balanceDays);
    }

    $('[name=end_date],[name=start_date],[name=request_type]').on('change click', function () {
      calculatebalance_days($('[name=total_days]').val());
    });

  $('[name=total_days]').change(function () {
    var totalDays = $(this).val();

    console.log("totalDays: ",totalDays)
    calculatebalance_days(totalDays);
  })
});
</script>

5. Example Use Cases

Leave request forms.
Training day allocation.
Project resource day planning.
Any form that needs date-range balance validation.

6. Customization Tips

Rename field IDs and names to match your Joget form fields.
Add weekend or holiday exclusion if your policy needs business-day calculation.
Replace alert messages with Joget validation messages for a smoother user experience.
Test the script with empty dates, same-day dates, and invalid ranges.

7. Key Benefits

Gives instant feedback to users.
Reduces invalid workflow submissions.
Keeps balance calculation visible in the form.
Avoids server-side checks for simple date math.

8. Security Note

Client-side validation improves usability, but important business rules should also be validated on the server side before final approval or database update.

9. Final Thoughts

This is a simple but effective Joget form enhancement. Use JavaScript for fast user feedback, and pair it with server-side validation when the balance rule affects approvals or payroll-sensitive data.

DEV Community