错误：Shell Form 未验证

Question

我正在尝试使用 jQuery/ajax 验证注册脚本。第一部分在用户填写时进行验证，这可以正常工作，但是如果他们在验证输入之前尝试并提交，脚本应该会引发警报。它不起作用，我也没有收到任何控制台错误。我在 jsfiddle 中发布了脚本并得到了以下冗长的错误：

{"error": "Shell 表单不验证{'html_initial_name': u'initial-js_lib', 'form': , 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': , 'help_text'：''，'名称'：'js_lib'}{'html_initial_name'： u'initial-js_wrap', 'form': , 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': , 'help_text': '', 'name': 'js_wrap'}"}

这是我正在使用的代码。我包括了有效的验证功能，以防它以某种方式干扰。

function checkForm() {
// Fetches and stores values
var name = document.getElementById("username1").value;
var email = document.getElementById("email1").value;
var password = document.getElementById("password1").value;
var age = document.getElementById("age1").value

// Checks for blanks
if (name == '' || email == '' || password == '' || age == '') {
    alert("You must fill in all fields!");
} else {
    // Notifying error fields
    var username1 = document.getElementById("username");
    var email1 = document.getElementById("email");
    var password1 = document.getElementById("password");
    var age1 = document.getElementById("age");

    if (username1.innerHTML == "Username must have at least 3 characters!"
     || username1.innerHTML == "Username cannot contain special characters!"
     || username1.innerHTML == "Username is already taken!"
     || email1.innerHTML == "Invalid email."
     || password1.innerHTML == "Password is too short!"
     || password1.innerHTML == "Password must contain at least one number."
     || password1.innerHTML == "Password must contain at least one letter."
     || age1.innerHTML == "You must be at least 13!") {
        alert("Please fill valid information!");
    } else {
        // Submits if all are valid
        document.getElementById("registerform").submit();
    }
}
}

// Ajax onblur event
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) {
    // For IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // For IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
        document.getElementById(field).innerHTML = "Validating..";
    } else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById(field).innerHTML = xmlhttp.responseText;
    } else {
        document.getElementById(field).innerHTML = "Error Occured! Reload or try again.";
    }
}
xmlhttp.open("GET", "/lib/registerProcess.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}

还有我的html表单：

    <form id="registerform" name="registerform" method="post" action="#">
    <table>
        <tr>
            <td><label for="username">Username</label></td>
            <td><input type="text" name="username" tabindex="1" onblur="validate('username', this.value)"></td>
            <td><div id="username"></div></td>
        </tr>
        <tr>
            <td><label for="email">Email</label></td>
            <td><input type="email" tabindex="2" onblur="validate('email', this.value)"></td>
            <td><div id="email"></div></td>
        </tr>
        <tr>
            <td><label for="password">Password</label></td>
            <td><input type="password" name="password" tabindex="3" onblur="validate('password', this.value)"></td>
            <td><div id="password"></div></td>
        </tr>
        <tr>
            <td><label for="age">Age</label></td>
            <td><input type="text" name="age" tabindex="5" onblur="validate('age', this.value)"></td>
            <td><div id="age"></div></td>
        </tr>
        <tr>
            <td colspan="2"><center><input type="submit" name="submitReg" id="submitReg" value="Sign Up" onsubmit="checkForm(); return false;"></center></td>
        </tr>
    </table>
    </form>

在做了一些研究之后，我的理解是我得到这个的原因是因为我的表单试图在提交时重新加载页面，这是 jQuery 不喜欢的。在尝试修复时，我将提交事件从 onclick="checkForm()" 交换为 onsubmit="checkForm(); return false;"，但无济于事。

如何防止 post 事件重新加载页面？还是我的问题完全不同？

Answer 1

尝试更改此行onsubmit="checkForm(); return false;" 到 document.getElementById("submitReg").addEventListener("click", checkForm); 将此粘贴到您的 js 代码中