Question

我正在尝试使用jQuery / ajax验证注册脚本。第一部分验证为用户填写，其工作正常，但如果脚本在输入验证之前尝试提交，则应该发出警报。它没有工作，我也没有得到任何控制台错误。我在jsfiddle中发布了脚本并得到了以下冗长的错误：

{＆＃34;错误＆＃34;：＆＃34;外壳形式无法验证{＆＃39; html_initial_name＆＃39;：你是＆quot; initial-js_lib＆＃39;，＆＃39;表格＆＃39;：，＆＃39; html_name＆＃39;：＆＃39; js_lib＆＃39;，＆＃39; html_initial_id＆＃39;：你的初始id_js_lib＆＃39;，＆＃39;标签＆＃39;：你＆＃39; Js lib＆＃39;，＆＃39;字段＆＃39;：，＆＃39; help_text＆＃39;：＆＃39;＆＃39;，＆＃39; name＆＃39;：＆＃39; js_lib＆＃39;} {＆＃39; html_initial_name＆＃39;：你有＆＃39; initial-js_wrap＆＃39;，＆＃39;表格＆＃39;：，＆＃39; html_name＆＃39;：＆＃39; js_wrap＆＃39;，＆＃39; html_initial_id＆＃39;：你＆＃39; initial-id_js_wrap＆＃39;，＆＃39;标签＆＃39;：你＆J 39包裹＆＃39;，＆＃39;字段＆＃39;：，＆＃39; help_text＆＃39;：＆＃39;＆＃39;，＆＃39; name＆＃39;：＆＃39; js_wrap＆＃39;}＆＃34;}

这是我正在使用的代码。我包含了工作验证功能，以防以某种方式干扰。

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;"，但无济于事。

如何防止帖子事件重新加载页面？或者我的问题完全不同？

Answer 1

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

错误：Shell表单无法验证

1 个答案: