javascript - Replace/Hide Input Button If Form Is Validated (Using jquery.validate.js) -

i have normal form:

<form class="vform" action='http://example.com/someaction.php' method='post' id='myid' >     <input type="email" name="email" id="email" class="required email " placeholder="enter email" >     <input id="#before" type='submit' value="submit"> </form> 

i using jquery.validate.js plugin validate form, working fine. (link)

what required:
before user redirected upon successful validation of form, there 'pause' (while redirecting)... during time, users repeatedly hitting submit button.

how can hide/replace (maybe loading gif or something) submit button if form validated.

meaning, disable or replace input button else if form validated.

the validation code:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script> <script>         $(document).ready(function() {         $(".vform").validate();     }); </script> 

i tried adding replacement/disable code after validate function this:

$(this).children('input[type=submit]').attr('disabled', 'disabled'); 

or

$('#before').replacewith($('#after'));    

but confused how go it.

can offer insight?

edit: the input button shouldn't replaced/disabled if form validation false

you can submithandler of jquery validate.

<script>     $(document).ready(function() { $(".vform").validate({      submithandler: function(form) { // <- pass 'form' argument in             $("#before").attr("disabled", true);             form.submit(); // <- use 'form' argument here.         } }); }); </script>