仅在修改表单后才能使配置文件照片上传弹出窗口

Question

在我的表单中，我已经完成了密码的修改并且它正常工作，然后我添加了一个弹出的配置文件照片上传，这意味着只有在表单变形后弹出，但这不会发生，它只是弹出即使两个密码不相同也是如此。

这是html代码      

   <p class="smedia"> <a href="" class="fb sign">Sign up with Facebook</a> <a href="" class="google plus">Sign up with 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 your account you agree to our <a href="#msa-popup">Rules</a> of use.</p>

        <button class='open-modal' data-modal="#modal1" type="submit">Create your account</button>

        <p class="corp"> <a href="signin.html">Sign in if you already have an account</a></p>
      </form>

      <!-- pop up -->
              <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>

确认密码和弹出窗口的javascript代码

    /******************************
    pop up 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 up modal
    ******************************/

    /**************************************
    ***************************************
    ***************************************
    comparing the two 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]');

      for (var i = 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 could not find an element with the name "' + comparateName + '". Please ensure that one element with that name exists.');
          continue;
        }

        if (comparates.length > 1) {
          console.error('CompareTo found more than one (' + comparates.length + ') elements with the name "' + comparateName + '". Please ensure that only one element with that 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 two passwords ending
    ***************************************
    **************************************/