问错误: Shell窗体不验证
EN

Stack Overflow用户

提问于 2015-07-26 15:10:48

回答 1查看 696关注 0票数 2

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

{“错误”："Shell form不验证{‘html_initial_name’：U‘initial_ lib'，'form'：，'html_name'：'js_lib'，'html_initial_id'：U’initial_js_lib‘，'label'：u'Js lib’，‘field’，'help_text'：''，“，'js_lib'}{'html_initial_name'：U‘initial_’Js‘，'form'：，'html_name'：'js_wrap'，’html_initial_id ''，U‘initial_js_form’，'label'：u'Js包装‘，’字段‘’，'help_text'：‘，’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>

在做了一些研究之后，我的理解是，我之所以得到这个结果，是因为我的表单试图在submit上重新加载页面，而jQuery不喜欢这样做。在我试图修复的过程中，我将提交事件从onclick="checkForm()"交换到了onsubmit="checkForm(); return false;"，但没有结果。

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

jquery