Ошибка проверки формы AJAX

Я разрабатываю простую форму входа, но с расширенными возможностями в этом. При отправке формы я хочу проверить ее с помощью AJAX и отобразить сообщение об ошибке в соответствующем сообщении «SPAN class =» error «. Проблема в том, что я не получаю ошибку проверки при отправке формы. Ниже приведен код пробовал. Пожалуйста, помогите ..

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="_images/Favicon.png"/>
<title>18+</title>
<link href="_css/login.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_scripts/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#username').focus(); Focus to the username field on body loads
$('#submit').click(function(){ // Create `click` event function for login
var username = $('#username'); // Get the username field
var password = $('#password'); // Get the password field
var login_result = $('.login_result'); // Get the login result div
var username = $('.username'); // Get the username error div
var password = $('.password'); // Get the password error div

if(username.val() == ''){ // Check the username values is empty or not
username.focus(); // focus to the filed
username.html('<span class="error">Enter the Username...</span>');
return false;
}

if(password.val() == ''){ // Check the password values is empty or not
password.focus();
password.html('<span class="error">Enter Your Password...</span>');
return false;
}

if(username.val() != '' && password.val() != ''){
var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type : 'POST',
data : UrlToPass,
url  : 'checker.php',
success: function(responseText){ // Get the result and asign to each cases
if(responseText == 0){
login_result.html('<span class="error">The Username Or Password You Entered Is Incorrect...</span>');
}
else if(responseText == 1){
window.location = 'admin.php';
}
else{
alert('Problem with sql query');
}
}
});
}
return false;
});
});
</script>

</head>
<body>
<div id="logo"></div>
<div id="container">
<div id="form">
<form action="" method="post" id="user_login" name="user_login" enctype="multipart/form-data">
<p id="head">User Login</p>
<div class="row">
<span class="error" class="login_result" id="login_result"></span>
</div>

<div class="row">
<div class="input">
<input type="text" id="username" name="username" class="detail" placeholder="Username" spellcheck="false" title="Enter Your Username.."/>
<span class="error" id="username">Enter Your Username....</span>
</div>
</div>

<div class="row">
<div class="input">
<input type="password" id="password" name="password" class="detail" placeholder="Password" spellcheck="false" title="Enter Your Password.."/>
<span class="error" id="password">Enter Your Password...</span>
</div>
</div>

<p class="submit">
<button type="submit" id="submit" name="submmit" value="Register">Login</button>
</p>
</form>
</div>
</div>
</div>
</div><!--end container-->
<div id="formfooter">
<div class="input">
Copyright &copy; CompanyName.
</div>
</div>
</body>
</html>

0

Решение

Вы должны предотвратить действие по умолчанию, когда вы перехватываете событие в javascript:

....
$('#submit').click(function(e){ // Create `click` event function for login
e.preventDefault(); //Prevent the default submit action of the form
var username = $('#username'); // Get the username field
var password = $('#password'); // Get the password field
var login_result = $('.login_result'); // Get the login result div
....
0

Другие решения

Во-первых, у вас есть два идентичных идентификатора в вашей HTML-форме.

<input type="text" id="username" .../>
<span class="error" id="username">....

Посмотрите выше, и вы можете видеть, что есть два идентификатора пользователя. Вы должны изменить атрибут id с атрибутом class, чтобы он стал

<span class="error" class="username">....

Во-вторых, в вашем javascript вы присваиваете те же переменные.

var username = $('#username');
var password = $('#password');
.....
var username = $('.username');
var password = $('.password');

Имя пользователя и пароль уже заняты. Измените это на другое имя переменной.

В-третьих, я предлагаю вам использовать эту удивительную библиотеку проверки формы jquery http://jqueryvalidation.org/

Удачи 🙂

0

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector