Ttdfjt

I'm trying to disable button after submitting form, but i'm facing some issue, when i submit black field it validate the form and disable the button... but i want to disable it on form submit successfully....go through many answers but could not succeed.

Here is my phtml file:

<form class="form quote"
 action="<?php /* @escapeNotVerified */ echo $block->getUrl("partsquote/index/QuotePost", array("_secure" => true));?>"
 id="drawpad-form"
 method="post"
 data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
 data-mage-init='"validation":' enctype="multipart/form-data">

 <?php echo $block->getBlockHtml('formkey')?>
 <fieldset class="fieldset">
 <!--legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Quote Request') ?></span></legend><br /-->
 <div class="fields">
 <div class="field name required">
 <label class="label" for="name"><span><?php /* @escapeNotVerified */ echo __('Your Name') ?></span></label>
 <div class="control">
 <input name="name" id="quote_name" title="<?php /* @escapeNotVerified */ echo __('Your Name') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Your Name') ?>" value="" class="input-text" type="text" data-validate="required:true"/>
 </div>
 </div>
 <div class="field email required">
 <label class="label" for="email"><span><?php /* @escapeNotVerified */ echo __('Your Email') ?></span></label>
 <div class="control">
 <input name="email" id="quote_email" title="<?php /* @escapeNotVerified */ echo __('Your Email') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Your Email') ?>" value="" class="input-text" type="email" data-validate="required:true, 'validate-email':true"/>
 </div>
 </div>
 </div>
 <div class="field">
 <label class="label" for="state"><span><?php /* @escapeNotVerified */ echo __('Your State / Province') ?></span></label>
 <div class="control">
 <select name="state" id="quote_state" class="required-entry validate-state" title="Your State / Province" aria-required="true">
 <option value="" selected="selected">Please Select State / Province</option>
 <?php foreach($block->getRegionCollection() as $region): ?>
 <option value="<?php echo $region->getName(); ?>"><?php echo $region->getName(); ?></option>
 <?php endforeach; ?>
 </select>
 </div>
 </div>
 <div class="fields">
 <div class="field phone required">
 <label class="label" for="phone"><span><?php /* @escapeNotVerified */ echo __('Your Phone Number') ?></span></label>
 <div class="control">
 <input name="phone" id="quote_phone" title="<?php /* @escapeNotVerified */ echo __('Your Phone Number') ?>" value="" placeholder="<?php /* @escapeNotVerified */ echo __('Your Phone Number') ?>" class="input-text" type="number" data-validate="required:true"/>
 </div>
 </div>
 <div class="field product required">
 <label class="label" for="product"><span><?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?></span></label>
 <div class="control">
 <input name="product" id="quote_product" title="<?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?>" placeholder="<?php /* @escapeNotVerified */ echo __('Product Voltage/Wattage') ?>" value="" class="input-text" type="text"/>
 </div>
 </div>
 </div>
 <div class="field message required">
 <label class="label" for="message"><span><?php /* @escapeNotVerified */ echo __('Your Message') ?></span></label>
 <div class="control">
 <textarea name="message" id="quote_message" title="<?php /* @escapeNotVerified */ echo __('Your Message') ?>" class="input-text" cols="5" rows="3" data-validate="required:true" placeholder="<?php /* @escapeNotVerified */ echo __('Your Message') ?>"></textarea>
 </div>
 </div>
 </fieldset>
 <div class="actions-toolbar">

 <div class="primary">
 <input type="hidden" name="image" id="quote_image" value="" />
 <input type="hidden" name="productName" id="productName" value="<?php echo $productName; ?>" />
 <button type="submit" id="submit" title="<?php /* @escapeNotVerified */ echo __('Submit') ?>" class="action submit primary">
 <span><?php /* @escapeNotVerified */ echo __('Submit') ?></span>
 </button>
 </div>
 </div>
</form>

<script> 

require(['jquery'],function($)
 $(document).ready(function() 
 $('#drawpad-form').submit(function()
 $('#submit').click(function(e) 
 this.disabled = true;
 );
 );
 );
); 

</script>

My problem was solved when i add bind section to my script file.

Totally i did this 2 steps :

1 - Disable button and prevent double submitting :

$('form').submit(function () 
 $(this).find(':submit').attr('disabled', 'disabled');
);

2 - Enable submit button if validation error occurred :

$("form").bind("invalid-form.validate", function () 
 $(this).find(':submit').prop('disabled', false);
);