onsubmit not fired when last entry is correct

Everything works fine when there is nothing in the email input, but as soon as I enter a “valid” email address, it doesn’t even fire the function because the alert is never triggered. Any help will be appreciated.

Javascript (js/registration.js):

function validateForm() {
var value1 = document.forms["regForm"]["username"].value;
var value2 = document.forms["regForm"]["pass1"].value;
var value3 = document.forms["regForm"]["pass2"].value;
var value4 = document.forms["regForm"]["email"].value;
var atpos = value4.indexOf("@");
var dotpos = value4.lastIndexOf(".");
var check = true;

if(value1 == null || value1 == "") {
    $("#userCheck").html("<img src='images/ico_fail.png'/> Please enter a user name! (25 character limit)");
    check = false;
} else $("#userCheck").html("<img src='images/ico_pass.png'/>");

if(value2 == null || value2 == "") {
    $("#pass1Check").html("<img src='images/ico_fail.png'/> Please enter a password! (25 character limit)");
    check = false;
} else {
    if(value2.length < 8) {
        $("#pass1Check").html("<img src='images/ico_fail.png'/> Password must be 8 to 25 characters");
        check = false;
    } else $("#pass1Check").html("<img src='images/ico_pass.png'/>");
}

if(value3 == null || value3 == "") {
    $("#pass2Check").html("<img src='images/ico_fail.png'/> Please re-enter your password! (25 character limit)");
    check = false;
} else {
    if(value3 != value2) {
        $("#pass2Check").html("<img src='images/ico_fail.png'/> Password does not match!");
        check = false;
    } else $("#pass2Check").html("<img src='images/ico_pass.png'/>");
}

if(value4 == null || value4 == "") {
    $("#emailCheck").html("<img src='images/ico_fail.png'/> Please enter a valid email!");
    check = false;
} else {
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        $("#emailCheck").html("<img src='images/ico_fail.png'/> Please enter a valid email!");
        check = false;
    } else $("#emailCheck").html("<img src='images/ico_pass.png'/>");
}

alert(check);
return check;
}

HTML:

<form name="regForm" method="post" action="" onsubmit="return validateForm();">
    <input type="text" id="uName" name="username" size="25" maxlength="25" value=""/>
    <span id="userCheck"> (25 character limit)</span></br>
    <input type="password" id="password1" name="pass1" size="25" maxlength="25" value=""/>
    <span id="pass1Check"> (25 character limit)</span></br>
    <input type="password" id="password2" name="pass2" size="25" maxlength="25" value=""/>
    <span id="pass2Check"></span></br>
    <input type="text" name="email" size="25" value="" />
    <span id="emailCheck"></span></br>
    <input type="submit" name="submit" value="Register" />
    <input type="hidden" name="perm" value="3" /> <!-- regular user -->
    <input type="hidden" name="redirect" value="index.php" />
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/registration.js"></script>

Answer

if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {

You dont have x defined here. i think it should be value4.length