javascript - How do I get my modal to pop up only after validation in form occurs? -

after html5 validation occurs , user clicks submit, trying modal pop thanking user submitting form. problem not sure how give true or false conditional 'required' attribute code can run after fields have been filled out. closest got following code:

javascript

 if(document.getelementbyid('e-mailclient').required = true || (document.getelementbyid('comments').required = true)) {        $(document).ready(function(){         $(".open").click(function(){           $(".pop-outer").fadein('slow');       });        $(".close").click(function(){          $(".pop-outer").fadeout('slow');        });      });     }  

html

 <form name="frm"  method="post" action="serverside.php" id="my-form">  <input id="e-mailclient" placeholder="e-mail" autocomplete="on" name="email" required>   <textarea id="comments" name="comments" placeholder="submit comments" rows="10" cols="70" required></textarea>     <button type="submit" value="submit" id="leadsubmit" class="open">send</button>  </form> 

if knows easier way have modal pop-up when clicking submit, , after validation on front-end has occurred , form fields filled out properly, great know.

use form submit event show modal. event won't fired unless form valid:

<form id="my-form">   <label for="email">e-mail</label>   <input id="email" type="email" required>   <button type="submit">submit</button> </form> 

$(() => $('#my-form').submit(event => {   event.preventdefault();   alert('form valid!'); })); 

check jsfiddle.