Your Location is: Home > Jquery-select2

Enable/disable submit button using Formvalidations library on non-null select2 dropdown selection and flatpicker start/end datetime fields

From: Vaduz View: 4428 panagioti 

Question

I have been looking over the documentation and examples for how to set criteria to enable and disable a form submission button. I have been successful in setting the criteria to include both the start and end dates for my form, but there are some intricacies that are giving me woe. Specifically, i have a select2 dropdown which has a blank placeholder, and two flatpickr datetime fields which require that they both be validated before the submit button is enabled. The problems are as follows:

  1. When the form loads, the select2 dropdown has no selection while the start & end datetimes are both blank, yet the submit button is still active. This is despite the fact that validations have been created for them:
                employee: {
                    validators: {
                        callback: {
                          message: 'An employee is required',
                          callback: function(input) {
                            // Get the selected options
                            const options = employees.select2('data');
                            return (options.length >= 1 );
                            }
                        }
                    
                    }
                },
                start: {
                    validators: {
                        notEmpty: {
                            message: 'The start date is required'
                        },
                    }
                },
                end: {
                    validators: {
                        notEmpty: {
                            message: 'The end date is required'
                        },
                    }
                },

i've also set the fieldStatus option for enabling and disabling the submit button:

                fieldStatus: new FormValidation.plugins.FieldStatus({
                    onStatusChanged: function(areFieldsValid) {
                        if (areFieldsValid) {
                            // Enable the submit button
                            // so user has a chance to submit the form again
                            submitButton.removeAttribute('disabled');
                        } else {
                            // Disable the submit button
                            submitButton.setAttribute('disabled', 'disabled');
                        }
                    }
                }),
  1. When the date fields are set such that the end is before the start datetime, the end field is correctly invalidated and the submit button is appropriate disabled. Once the end date is corrected, the submit button is indeed re-enabled. This scenario, however exists REGARDLESS of whether a choice has been made in the select2 dropdown. The startEndDate validation is as follows:
                startEndDate: new FormValidation.plugins.StartEndDate({
                    format: 'YYYY-MM-DD HH:mm',
                    startDate: {
                        field: 'start_datetime',
                        message: 'Start date & time must be valid and before end'
                    },
                    endDate: {
                        field: 'end_datetime',
                        message: 'End date & time must be valid & after the start'
                    },
                }),

Shouldn't the submit button be disabled until all three form elements have been populated and pass validation? Does anyone have any pointers/suggestions?

Best answer