AJAX 양식 유효성 검사 오류

간단한 로그인 양식을 개발 중이지만 고급 기능이 포함되어 있습니다. 양식을 제출할 때 AJAX로 유효성을 검사하고 해당 "SPAN class ="error "에 오류 메시지를 표시하고 싶습니다. 양식을 제출할 때 유효성 검사 오류가 표시되지 않습니다. 다음 코드는 i입니다. . 해봤 당신이 자바 스크립트의 이벤트 잡을 때AJAX 양식 유효성 검사 오류

<!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>

출처

2014-09-14 Charan Balse

'$ ('# 사용자 이름') (초점).; 본문로드시 사용자 이름 필드에 집중하십시오. 포커스 앞에 // 주석이 필요합니다. – Mattigins

당신은 기본 동작을 방지해야합니다 .. 도와주세요 :. 당신이 당신의 HTML 양식이 개 동일한 ID를 가지고

.... 
$('#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 
....

출처

2014-09-14 08:48:39

대단히 감사합니다. –

먼저

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

위를 보시면 두 개의 아이디가 있음을 알 수 있습니다. 클래스 속성으로 id 속성을 변경해야합니다.

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

둘째, 자바 스크립트에서 동일한 변수를 할당했습니다.

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

사용자 이름과 비밀번호는 이미 사용되었습니다. 변수 이름을 다른 변수로 변경하십시오. 셋째

, 난 당신이 멋진 JQuery와 양식 유효성 검사 라이브러리를 사용하는 것이 좋습니다 http://jqueryvalidation.org/

행운을 빕니다 :)

출처

2014-09-14 08:54:34

제안 해 주셔서 대단히 감사합니다. 하지만 문제는 여전히 exixts, 내가 어떤 양식을 제출하면 유효성 검사 오류가 발생하지 않을거야 .. Logged –

AJAX 양식 유효성 검사 오류

답변

관련 문제