can't compare passwords in javascript-CodePudding

This is my code I've been working on for a couple of hours, I can't get it to compare the two passwords, it will submit the form even if the passwords don't match. It does not return any alert message either way. I've tried doing (pass1.value == pass2.value) too, it didn't work.

strong text    alert ("Welcome");

function enableButton(){
    if (document.getElementById("checkb").checked)
    {
        document.getElementById("btn").disabled = false;
    }
    
    else {
        document.getElementById("btn").disabled = true;
    }
}

function checkPassword() {
    var pass1= document.getElementById("pw").value ;
    var pass2= document.getElementById("pw2").value ;
    
    if ( pass1 == pass2 ) 
    {
        alert ("Passwords match") ;
        return true;
    }
    
    else {
        alert ("Passwords do not match");
        return false;
    }
}

 <!DOCTYPE html>

<html lang="en">

<head>

<title> Sign up </title>

<link rel = "stylesheet" href = "registration.css">
<script src = "registration.js"></script>
<noscript> Sorry, your browser does not support Javascript! </noscript>

</head>

<body>

<header style = " background-color : #f0e68c" >

<div class = "logo">
<a href = "#"><img src = "logo.png" style = "width : 130px ; height : 130px"> </a>
</div>

<ul class = "menu">
 <a href="#" ><li class = "menu1">  Home </li> </a>
 <a href="#"><li class = "menu1">  About us </li> </a>
 <a href="#"><li class = "menu1">  Blog </li> </a>
 <a href="#"><li class = "menu1">  Book an Appointment </li> </a>
 <a href="#"><li class = "menu1"> Contact us </li></a>
 </ul>
 <br>

 
</header>

<div class = "heading">
<h1> Sign Up </h1>
<div>

<div class = "form" align = "center">
<form>
<fieldset>

<div class = "left">
<label for = "fname"> First Name </label><br>
<input type = "text" id = "fname" name = "fname" required> 
</div>


<div class = "left">
<label for = "lname"> Last Name </label><br>
<input type = "text" id = "lname" name = "lname" required>
</div>

<div class = "clear"> &nbsp; </div> 
 
<div class = "left">
<label for = "email"> E-mail </label><br>
<input type = "email" id = "email" name = "email" required>
</div>

<div class = "clear"> &nbsp; </div>

<div class = "left">
<label for = "pw"> Password </label><br>
<input type = "password" id = "pw" min = "6" max = "25" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,25}" title="Password should contain Uppercase letters, lowercase letters, numbers, minimum 6 and maximum 25 characters " required>
</div>

<div class = "left"> 
<label for = "confpw"> Confirm password </label><br>
<input type = "password" id = "pw2" required>
</div>

<div class = "clear"> &nbsp; </div> 

<input type = "checkbox" id = "checkb" name = "checkb" onclick = "enableButton()" required> I agree to the rules and privacy policy<br><br>
<input type = "checkbox"> I want to recieve updates by mail <br>
<input type = "checkbox"> Subscribe for monthly newsletter <br><br>

<div class = "clear"> &nbsp; </div>

<a href = "#"><input type = "submit" id = "btn" value = "sign up"></a>


</fieldset>

</form>
</div>

</html>

CodePudding user response：

You are never calling checkPassword so the code never gets run, if you want to run that code when someone submits your form, you can use the following code.

document.querySelector('form').addEventListener('submit', function (e) {
    //Prevent default behaviour
    e.preventDefault();
    //Check passwords
    if (checkPassword()) {
        this.submit();
    }
});

CodePudding user response：

You are calling the checkPassword function when the sign up button is clicked by user. So you can't compare pass1 and pass2 when user information is submitted to the server. In this case, you can solve to catch using JavaScript the event that handle by the sign up button, like this.

document.querySelector('form').addEventListener('submit', function (e) {
  //Prevent default behaviour
  e.preventDefault();
  
  //Check passwords
  if (checkPassword()) {
      this.submit();
  }
});

And you was wrong in HTML code.

<a href = "#"><input type = "submit" id = "btn" value = "sign up"></a>

If I fix your mistake, as allows.

<input type = "submit" id = "btn" value = "sign up">

// or

<button typpe="submit" id="btn"> sign up </button>

Good luck! see you again.