2015-07-26 2 views
2

Я пытаюсь проверить регистрационный сценарий с помощью 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;", но безрезультатно.

Что я могу сделать, чтобы предотвратить пост событие от перезагрузки страницы? Или моя проблема совсем другая?

ответ

0

Попробуйте изменить эту строку onsubmit="checkForm(); return false;" в document.getElementById("submitReg").addEventListener("click", checkForm); вставьте в код JS

Смежные вопросы