jquery authentication passwords not matching

Question

Would really appreciate if you could tell me where I'm going wrong with this code - I'm a beginner so go easy guys!

I have a form as below and some basic jQuery authentication. Everything seems to be working fine accept for the check that the passwords are matching which tells me the passwords are matching every time and for the life of me I can't figure what's up.

Html form:

 <form name="signupform" id="signupform" action="signup.php" method="post"> 
<div>Email Address</div>
<input id="email" name="email" type="text" maxlength="88">
<span id="emailstatus"></span>
<div>Full Name</div>
<input id="personname" name="personname" type="text" maxlength="20">
<div>Create Password</div>
<input id="password1" name="password1" type="password" maxlength="100">
<div>Confirm Password</div>
<input id="password2" name="password2" type="password" maxlength="100"> 
<div>Address Line 1</div>
<input id="address_line1" name="address_line1" type="text" maxlength="100">
<div>Address Line 2</div>
<input id="address_line2" name="address_line2" type="text" maxlength="100">
<div>City</div>
<input id="address_city" name="address_city" type="text" maxlength="100">
<div>State</div>
<input id="address_state" name="address_state" type="text" maxlength="100">
<div>Post Code/ ZIP Code</div>
<input id="address_zip" name="address_zip" type="text" maxlength="100">
<div>Country</div>
<select id="address_country" name="address_country">
  <?php include_once("template_country_list.php"); ?>
</select><br><br>

<button class="inline-block" id="signupbtn">Create Account</button>
<p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
<p id="passmatcherror">Passwords do not match.</p>

Jquery:

$(document).ready(function(){
var pname = $("#personname");
var e = $("#email");
var p1 = $("#password1");
var p2 = $("#password2");
var country = $("#address_country");
var add1 = $("#address_line1");
var add2 = $("#address_line2");
var city = $("#address_city");
var state = $("#address_state");
var zip = $("#address_zip");
var status = $("#status");
// Place ID's of all required fields here.
required = ["personname", "email", "password1", "password2", "address_country", "address_line1", "address_line2", "address_city", "address_state", "address_zip"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
passmatcherror = $("#passmatcherror");
passmatcherror.hide();
// The text to show up within a field when it is incorrect
emptyerror = "";
emailerror = " Please enter a valid e-mail.";
$("#signupform").submit(function(){ 
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        }

         else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    if(p1 != p2){
            passmatcherror.fadeIn(750);
            p1.addClass("needsfilled");
            p2.addClass("needsfilled");

        }


    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    }
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
        errornotice.hide();
        passmatcherror.hide();
       }
        });
}); 

Answer 1

In this section you seem to be comparing two jquery objects instead of their values:

if(p1 != p2){
    passmatcherror.fadeIn(750);
    p1.addClass("needsfilled");
    p2.addClass("needsfilled");
}

what happens if you change it to

if(p1.val() !== p2.val()){
    passmatcherror.fadeIn(750);
    p1.addClass("needsfilled");
    p2.addClass("needsfilled");
}