How to disable submit button until form is filled

In this article, we will explore four different methods to disable a submit button until a form is filled.

These methods will ensure that the user fills out all the necessary fields before they can submit the form, thereby improving data integrity and user experience. Let's dive in!

Using event listeners and disabling attribute #

In this approach, we'll use event listeners to monitor changes in the form fields, and if all required fields are filled, we'll enable the submit button; otherwise, it remains disabled.

1. We create a form with input fields and a submit button.


2. The required attribute on input fields ensures that they must be filled before form submission.


3. We use JavaScript to select the form and the submit button.


4. An event listener is added to the form, which listens for any input changes in the form fields.


5. The checkValidity() method verifies if all the required fields are filled and returns a Boolean value accordingly.


6. The submit button's disabled attribute is set to the opposite of the form's validity, ensuring it's enabled only when the form is valid.

Using jQuery-based approach #

In this method, we'll use jQuery to simplify the process of handling form validation and enabling/disabling the submit button.

1. Similar to the previous method, we create a form with input fields and a submit button.


2. We include the jQuery library using a script tag.


3. Using jQuery, we select the form and the submit button.


4. The .on('input', ...) function listens for input changes within the form.


5. The checkValidity() method is used to determine if the form is valid.


6. The .prop('disabled', ...) method is used to set the `disabled` property of the submit button based on the form's validity.

Disabling with plain JavaScript and setInterval #

This method uses plain JavaScript and a setInterval loop to periodically check the form's validity and enable/disable the submit button accordingly.

1. The form and submit button are selected using JavaScript, as in the previous methods.


2. We define a function updateSubmitButton to check the form's validity and enable/disable the submit button accordingly.


3. A setInterval loop is created, which repeatedly calls updateSubmitButton every 500ms to keep the button status up to date.


4. When the form is submitted (e.g., the user clicks the submit button), we clear the interval to stop checking the form's validity.

Using the Constraint Validation API #

In this approach, we use the Constraint Validation API, which is built into modern browsers, to handle form validation and button disabling.

1. As before, we have a form with input fields and a submit button, and we select them using JavaScript.


2. The form's input event is listened for, which triggers whenever the user types or interacts with any form field.


3. The checkValidity() method of the form is used to check if the form is valid.


4. The submit button's disabled attribute is set to the opposite of the form's validity, disabling it when the form is invalid.

In conclusion, we explored four different methods to disable the submit button until the form is filled using JavaScript.

1. The first method uses event listeners and the checkValidity() method.

2. The second method accomplishes the same using jQuery.

3. The third method uses a plain JavaScript approach with setInterval to periodically check form validity.

4. The fourth method utilizes the Constraint Validation API for form validation and button disabling.