Q:

Why does this form get submitted even if the required fields are left empty? 

I am working with a form in which i take the password input from the user and then javascript checks if the passwords match.  But even if the password is required, the form gets submitted if the input box is left empty.  I am using javascript to submit the form.  Although i have a solution to my problem but i wanted to ask that why this is happening and not the normal action of Please fill in this field, which normally appears when doing so. 
HTML-
<form action="check.php" method="POST" id="userform">
USERNAME:<input name="uname" type="text" required/>
PASSWORD:<input type="password" id="upass" name="upass" type="text" required/>
RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" required/>
<input type="button" value="Submit" onclick="passCheck()">
</form>

JavaScript-
function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if(pass1 == pass2){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match.  Please retry."); 
    document.getElementById('userform').reset();
}
}

EDIT-
I want that this should appear when i click on the button and the password fields are left empty:http://i.stack.imgur.com/cGuCK.jpg

A:

Because in order for the forms to not be submitted, your function must return false, as well as check to make sure the passwords aren't blank, like so: http://jsfiddle.net/upgradellc/Heay3/5/
javascript:
function passCheck(){
    var pass1 = document.getElementById('upass').value;
    var pass2 = document.getElementById('reupass').value;
    if(pass1 == pass2 && pass1 ! = ""){
        return true;
    }
    else{
        alert("Both password inputs do not match.  Please retry."); 
        document.getElementById('userform').reset();
        return false;
    }
}

html:
<form action="check.php" method="POST" id="userform" onSubmit="return passCheck()" >
    USERNAME:<input name="uname" type="text" />
    PASSWORD:<input type="password" id="upass" name="upass" type="text" />
    RETYPE PASSWORD:<input type="password" id="reupass" name="reupass" type="text" />
    <input type="submit" value="Submit" >
</form>

A:

That is because if both are blank
pass1 = NULL pass2 = NULL

Which essentially means pass1 == pass2
[EDIT]
Change your code to
function passCheck(){
var pass1 = document.getElementById('upass').value;
var pass2 = document.getElementById('reupass').value;
if((pass1 == pass2) && (pass1!="")){
    document.getElementById('userform').submit();
}
else{
    alert("Both password inputs do not match.  Please retry."); 
    document.getElementById('userform').reset();
}
}

