Я пытаюсь проверить регистрационный сценарий с помощью JQuery/Ajax. Первая часть проверяется, когда пользователь заполняет, что отлично работает, но сценарий должен выдать предупреждение, если они попытаются отправить до того, как их ввод будет проверен. Он не работает, и я тоже не получал никаких консольных ошибок. Я отправил сценарий в jsfiddle и получил следующую длинную ошибку:Ошибка: Shell Форма не проверяет
{"error": "Shell form does not validate{'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': '', 'name': '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;"
, но безрезультатно.
Что я могу сделать, чтобы предотвратить пост событие от перезагрузки страницы? Или моя проблема совсем другая?