How to Enable Disable Submit Button with jQuery

In this tutorial today we will see how we can Enable Disable Submit Button with jQuery in a web form.Why is it important? Because sometimes user entered wrong details into the form.So We can prevent the user to enter the wrong details by Enable Disable Submit Button we will use jQuery for this purpose.

Enable Disable Submit Button Working/Functionality?

In this script, we have an HTML form in which we have two fields Name and Email. I used Bootstrap for styling this form.We have used the jQuery script for validating the inputs. The user will enter the values, and it will be validated from jQuery if both inputs are correct then the condition will be true and Submit button will be enabled and the user can submit the form successfully.

1-Enable Disable Submit Button with jQuery Screen Shot

Enable Disable Submit Button with jQuery

2-Enable Disable Submit Button Error

Enable Disable Submit Button with jQuery error validate

3-HTML for Enable Disable Button

This is the HTML form which contains the two input fields.On this input fields we will use onblur and call a javascript function to validate the inputs.

4-jQuery Validation to Enable / Disable Submit Button

This is the jQuery script which will validate our two input fields which is name and email.This script will check that input fields are empty or not.It will also check that the email format is correct or not for validating email pattern we have used Regex expression.This is our regex for email pattern matching.

Complete jQuery code.

5-Complete code for enable disable submit button with jQuery

Conclusion:

So today in this tutorial we have learned how to enable disable submit button with jQuery.So now you can use this script in your any web application for validating the inputs and enable disable form submit button.If you have any ideas let us know in the comment section.If you find this information useful, remember to share it on your social network. If you have any specific concerns/doubt about this article you can comment below and let us know.

Download   Demo

Read previous post:
Add Remove input fields Dynamically using jQuery Bootstrap
Add Remove Input Fields Dynamically using jQuery Bootstrap

Sometimes we have to add dynamically input fields in our application, so for that need, I am going to show...

Close