---
title: "How to disable form submission until all required fields have been validated using jQuery?"  
description: "How to disable form submission until all required fields have been validated using jQuery?"  
author: "Revati S Misra"  
published: 2023-05-11  
updated: 2023-05-15  
canonical: https://www.mindstick.com/forum/158294/how-to-disable-form-submission-until-all-required-fields-have-been-validated-using-jquery  
category: "jquery"  
tags: ["jquery", "jquery validate", "form validation"]  
reading_time: 2 minutes  

---

# How to disable form submission until all required fields have been validated using jQuery?

How to [disable](https://www.mindstick.com/forum/12901/how-to-disable-enable-input-box-in-aspx-with-value-from-sql) [form](https://www.mindstick.com/forum/6/multi-form-mfc-application) [submission](https://www.mindstick.com/forum/156176/what-is-a-directory-submission) until all [required fields](https://www.mindstick.com/forum/160242/how-to-use-data-annotation-to-validate-required-fields) have been validated using jQuery?

## Replies

### Reply by Aryan Kumar

Here are the steps on how to disable form submission until all [required](https://www.mindstick.com/forum/160269/what-is-required-data-annotation-how-does-it-affect-model-validation) [fields](https://www.mindstick.com/forum/159126/sql-query-for-all-tables-and-fields-in-an-oracle-db) have been validated using jQuery:

1. Identify the required fields in your form.
2. Add a class to each required field.
3. Create a function to validate the form.
4. Use the .on() method to attach the validation function to the form.
5. In the validation function, check if all required fields have been filled out.
6. If all required fields have been filled out, submit the form.
7. If not, disable the submit button.

Here is an example of how to disable form submission until all required fields have been validated using jQuery:

Code snippet

```plaintext
// Identify the required fields in your form
var requiredFields = ['name', 'email', 'phone'];

// Add a class to each required field
$(requiredFields).addClass('required');

// Create a function to validate the form
function validateForm() {
  // Check if all required fields have been filled out
  var allFieldsFilledOut = true;
  for (var i = 0; i < requiredFields.length; i++) {
    var field = $(requiredFields[i]);
    if (field.val() === '') {
      allFieldsFilledOut = false;
      break;
    }
  }

  // If all required fields have been filled out, submit the form
  if (allFieldsFilledOut) {
    $('#submit').click();
  }

  // If not, disable the submit button
  else {
    $('#submit').prop('disabled', true);
  }
}

// Use the `.on()` method to attach the validation function to the form
$('#form').on('submit', validateForm);
```

This code will disable the submit button until all required fields have been filled out. Once all required fields have been filled out, the submit button will be enabled and the form will be submitted.


---

Original Source: https://www.mindstick.com/forum/158294/how-to-disable-form-submission-until-all-required-fields-have-been-validated-using-jquery

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.