Form Validation event.preventdefault not working

Question

I am new to Javascript & Jquery. I am currently working on college project, I have a form input control for new password change and I want to avoid submitting the form if the use have not entered anything. I am not sure if I have chained the method well or if it is a correct to match the value from the two input fields. I know there is a validation plugin but I want to try work things out before that.

Any help or suggestion will be appreciated

Here is the code

<form id="accmanager" name="accmanager" action="view-acc.php" method="POST">
    <h1>Account Management</h1>
    <p>
      <ul type="none">
        <li><input type="radio" name="optaccmanager" checked="checked" id="viewaccinfo" /> View Account Information</li>
        <li><input type="radio" name="optaccmanager" id="addacc" /> Add Account</li>
        <li><input type="radio" name="optaccmanager" id="tochangepass" /> Change Password
         <ul id="changepass" type="none" style="display: none">
            <li><input type="text" name="newpassword" id="newpassword" size="23" title="Enter new password" /></li>
            <li><input type="text" name="confirmpassword" id="confirmpassword" size="23" title="Re-type new password" /></li>
        </ul>
        </li>
    </ul>
    <input id="submitbtn" type="submit" value="View Account" style="display: inline-block;position: absolute;left: 5em;top:20em;" />
</form>

and the script code

<script>
    //form validation section
    $(document).ready(function(){
        var changepass = $("#changepass"),
            addacc = $("#addacc"),
            viewaccinfo = $("#viewaccinfo"),
            tochangepass = $("#tochangepass");

            addacc.on("click",function(event){
              changepass.css("display","none");
              $("#submitbtn").attr("value","Add Account");
            });

            viewaccinfo.on("click",function(event){
                changepass.css("display","none");
                $("#submitbtn").attr("value","View Account");
            });

            tochangepass.on("click",function(event){
                changepass.css("display","inline");
                $("#submitbtn").attr("value","Change Password");    
            });

            $("form").submit(function(event){
                var newpassword = $("#newpassword"),
                    confirmpassword = $("#confirmpassword");

                if ((newpassword.val == null) || (confirmpassword.val == null)) {
                    event.preventDefault;
                    newpassword.attr("title","Please enter new password");
                }
            });
   });

Answer 1

Try to change this:

if ((newpassword.val == null) || (confirmpassword.val == null)) {
   event.preventDefault;
   newpassword.attr("title","Please enter new password");
}

To:

if ((newpassword.val().length == 0) || (confirmpassword.val().length == 0)){
   event.preventDefault();
   newpassword.attr("title","Please enter new password");
   return false;
}

Answer 2

Thanks you all for your help guys I sorted the bug by changing the if block expression.

From previous code:

$("form").submit(function(event){
            var newpassword = $("#newpassword"),
                confirmpassword = $("#confirmpassword");

            if ((newpassword.val == null) || (confirmpassword.val == null)) {
                event.preventDefault;
                newpassword.attr("title","Please enter new password");
            }
        });

To new code:

$("form").submit(function(event){
if ($("#tochangepass").is(":checked")){
   if (  ($("#newpassword").val().length == 0) || ($("#confirmpassword").val().length == 0)  ) {
        event.preventDefault();
        newpassword.attr("title","Please enter new password");
    }
    else  {
        return true;
    }
}

}