javascript - making the profile photo upload popup ONLY AFTER varifying the form -

in form, have done varification of password , works properly, added pop profile photo upload meant popup after form has been varified, doesnt happen, pops if 2 passwords arent same.

this html code

   <p class="smedia"> <a href="" class="fb sign">sign facebook</a> <a href="" class="google plus">sign google+</a> </p>          <p class="or">  or  </p>          <label for="name"> name </label>         <input type="text" id="name" name="user_name" required="required" />         <label for="mail"> email </label>         <input type="email" id="mail" name="user_email" required="required" placeholder="mymail@example.com" />          <label for="password"> password</label>         <input type="password" minlength="6" id="password" name="password" required="required" />         <label for="compare_password">confirm password</label>         <input type="password" minlength="6" id="compare_password" name="compare_password" compareto="password" required="required" />           <p class="terms">by creating account agree our <a href="#msa-popup">rules</a> of use.</p>          <button class='open-modal' data-modal="#modal1" type="submit">create account</button>          <p class="corp"> <a href="signin.html">sign in if have account</a></p>       </form>        <!-- pop -->               <div class='modal' id='modal1'>               <div class='content'>               <h1 class='title'>profile photo upload</h1>               <div class="wrapper">               <button class="no-image" id="img-result">upload image</button>               </div>               </div>               <a class='btn submit' data-modal="#modal1" href="index.html">submit</a>               </div>               </div> 

the javascript code confirm password , popup

    /******************************     pop modal     ******************************/     $(".modal").each( function(){         $(this).wrap('<div class="overlay"></div>')     });      $(".open-modal").on('click', function(e){         e.preventdefault();         e.stopimmediatepropagation;          var $this = $(this),                 modal = $($this).data("modal");          $(modal).parents(".overlay").addclass("open");         settimeout( function(){             $(modal).addclass("open");         }, 350);          $(document).on('click', function(e){             var target = $(e.target);              if ($(target).hasclass("overlay")){                 $(target).find(".modal").each( function(){                     $(this).removeclass("open");                 });                 settimeout( function(){                     $(target).removeclass("open");                 }, 350);             }          });      });      $(".close-modal").on('click', function(e){         e.preventdefault();         e.stopimmediatepropagation;          var $this = $(this),                 modal = $($this).data("modal");          $(modal).removeclass("open");         settimeout( function(){             $(modal).parents(".overlay").removeclass("open");         }, 350);      });      /******************************     ending of pop modal     ******************************/      /**************************************     ***************************************     ***************************************     comparing 2 passwords     ***************************************     ***************************************     **************************************/      (function() {       'use strict';        function comparepasswords(password, comparate, invalidmsg) {         if (password.value !== comparate.value) {           password.setcustomvalidity(invalidmsg);         } else {           password.setcustomvalidity('');         }       }        var inputs = document.queryselectorall('input[compareto], input[data-compareto]');        (var = 0, input; input = inputs[i]; i++) {         var form = input.form;         var comparatename = input.getattribute('compareto') || input.getattribute('data-compareto');         var comparates = form.queryselectorall('[name="' + comparatename + '"]');          if (comparates.length === 0) {           console.error('compareto not find element name "' + comparatename + '". please ensure 1 element name exists.');           continue;         }          if (comparates.length > 1) {           console.error('compareto found more 1 (' + comparates.length + ') elements name "' + comparatename + '". please ensure 1 element name exists.')           continue;         }          var comparate = comparates[0];         var error = input.getattribute('comparetoerror') ||           input.getattribute('data-comparetoerror') ||           'these passwords don\'t match.';          var callback = (function(input, comparate, invalidmsg) {           return function() {             comparepasswords(input, comparate, invalidmsg);           }         })(input, comparate, error);          input.addeventlistener('change', callback);         comparate.addeventlistener('change', callback);       }     }());      /**************************************     ***************************************     comparing 2 passwords ending     ***************************************     **************************************/