简体   繁体   中英

Why is my form not returning an alert when password does not match the confirm password field Javascript?

So I'm new to JS, and I'm trying to make this form prevent submission if password does not match the confirm password field. However, when I enter in 2 different passwords, I don't get an alert like I've coded in the script below. Any thoughts? For reference, the form was built w/ bootstrap.

   <form class="form-signin">
            <div class="form-label-group">
              <input type="text" id="fullName" class="form-control" placeholder="Username" required autofocus>
              <label for="fullName">Full name</label>
            </div>

            <div class="form-label-group">
              <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required>
              <label for="inputEmail">Work email</label>
            </div>
            

            <div class="form-label-group">
              <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
              <label for="inputPassword">Password</label>
            </div>
            
            <div class="form-label-group">
              <input type="password" id="inputConfirmPassword" class="form-control" placeholder="Password" required>
              <label for="inputConfirmPassword">Confirm password</label>
            </div>

            <button class="btn btn-lg btn-primary btn-block text-uppercase" id ="register-btn" type="submit">Register</button>
            <hr class="my-4">
            <div class="registration-login">
            <p class="already-have__account">Already have an account?</p><a href="log-in.html">&nbsp;Login</a>
            </p>
        </div>
        </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="registration__section">
    <h2>Innovative supply chain teams use Rumi to manage scalable and sustainable packaging.
    </h2>
</div>

<script>
  var form = document.getElementById('form-signin');
  form.onsubmit = function() {

    if (inputPassword.value !== inputConfirmPassword.value) {
      alert("Your passwords don't match");
      return false;
    }

    else {
      return true;
    }

  }

Just a minor mistake.

You are using get getElementById.

 var form = document.getElementById('form-signin');

There is no id with 'form-signin',

<form class="form-signin">

Rename the class to id.

<form id="form-signin">

Check out this (JSFiddle). It's working here.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM