How to Enable or Disable Button until Fields are Not Filled in Magento 2

In this tutorial, Today I will explain to how to enable or disable submit button until forms fields are not filled in Magento 2. Sometimes, we need to set functionality like if form fields not filled then, submit button should be disabled or button color should be different.

Here, I set an example that for customer login form. If customer email and password fields not filled then, sign button will be disable or add different class.

You may also like this :

For that, you can add jquery script in your instance’s common js file or you can add inside login.phtml file :

File path : app/design/frontend/VendorName/ThemeName/Magento_Customer/templates/form/login.phtml

Copy Code


<script type="text/javascript">
require(["jquery"], function($){
    $(document).ready(function() {
        $("#pass").on("change keyup paste", function() {
            // For Add Class
            $("#email").val() != "" && $("#pass").val() != "" ? $("#send2").addClass('test') : $("#send2").removeClass('test');
            // For Disable Button
            $("#email").val() != "" && $("#pass").val() != "" ? $("#send2").prop('disabled', true) : $("#send2").prop('disabled', false); 
        });
        $("#email").on("change keyup paste", function() {
            // For Add Class
            $("#email").val() != "" && $("#pass").val() != "" ? $("#send2").addClass('test') : $("#send2").removeClass('test');
            // For Disable Button
            $("#email").val() != "" && $("#pass").val() != "" ? $("#send2").prop('disabled', true) : $("#send2").prop('disabled', false);  
        });
    });
});
</script>

You can add this script in login.phtml file. This code will be working for change value in email and password textbox. It will also useful when you fill up value by auto save details from your browser. You can use this script in other files also for enable disable button based on form fill up.

That’s it !!!

I hope this blog is easy to understand how to enable or disable submit button until forms fields are not filled in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 3,448