$ .post 함수를 사용하여 Jquery 실시간 입력 유효성 검사

Question

안녕 얘들 아 :
Jquery 및 웹 개발에 익숙하다. 내 웹 사이트에서 Jquery로 실시간 입력 유효성 검사를 구현하고 싶습니다. 어쩌면이 게시물에 구문 오류가 있지만 실제 코드에는 아무 것도 없다고 확신합니다.

사용자가 공백이 아닌 값을 입력 할 때마다 error()가 호출되어 서버 (PHP + MySQL)에 입력 값이 이미 있는지 확인하기위한 게시 요청을합니다. 오류()는 제출 단추를 누르면 다시 사용됩니다.

제출 버튼을 누르기 전에 정상적으로 작동합니다. 이미 존재하는 것을 입력하면 양식이 제출되지 않습니다. 그러나 새로운 것을 입력하면 데이터가 여전히 데이터베이스에 삽입 되더라도 여전히 ("존재") 텍스트를 가져옵니다. 나는 항상 ("성공") 후 ("존재")를 얻을 것이다. 그것은 제출할 때처럼, 오류()에서. post 요청 양식의. post 요청 후 이루어집니다. 이 버그를 해결하는 방법이 있습니까? 또는이 유형의 입력 유효성 검사를 구성하는 다른 방법 ?? 감사합니다.

$('.unique').change(function(){ 
    error($(this)); 
}); 

function error(obj) 
{ 
    var ok = true; 

    if(obj.val().length == 0) 
    { 
     alert('This field can not be blank'); 
     ok = false; 
    } 

    else 
    { 
     var data = "action=check&input=" + obj.attr('name') + "&value=" + obj.val(); 
     $.post('database.php', 
       data, 
       function(reply){ 
        if(reply == true) 
        { 
         alert("This " + obj.attr('name') + " already exists"); 
         ok = false; 
        }   
       }); 

    } 
    return ok; 
} 

//When the user submits the form 
$('#info').submit(function(){ 
    var ok = true; 
    var data = 'action=insert&' + $(this).serialize(); 

    //Passes each input to the error() 
    $('.unique').each(function{ 
     var temp = error($(this)); 
     ok = ok && temp; 
    }); 

    if(!ok) return false; 

    $.post('database.php', 
      data, 
      function(reply){ 
       alert(reply); 
      }); 
}); 

<form id="info" name="info" action="" method="post"> 
    <input type ="text" class = "unique" id = "username" name = "username" class = "unique"> 
    <input type ="text" class = "unique" id = "email" name = "email" class = "unique"> 
</form> 

//On the server 
if(isset($_POST['action'])) 
{ 
    if($_POST['action'] == 'check') 
    { 
     $query = sprintf("select * from Users where %s = '%s'", 
                   $_POST['input'], 
                   $_POST['value']); 
     $result = mysql_query($query); 
     if(mysql_num_rows($result) > 0) 
     { echo true;} 

     else 
     { echo false;} 
    } 
    else 
    { 
     $query = sprintf("insert into Users(username, email) values('%s','%s')", 
        $_POST['username'], 
        $_POST['email']); 
     if(!($result = mysql_query($query))) 
      die(mysql_error()); 

     echo 'Success'; 
    }  
} 

Answer 1

즉시 눈에 띄는 몇 가지 문제가 있습니다. 첫 번째 오류 함수는 항상 false를 반환합니다. 두 번째 $. post는 비동기입니다. 즉, ajax 요청의 응답을 기다리는 동안 코드 실행이 계속됩니다. $ .post 요청 이전에 $.ajaxSetup({async:false});을 사용하여 jquery에서 변경할 수 있습니다.

$('.unique').change(function(){ 
    error($(this)); 
}); 

function error(obj) 
{ 
    var ok = true; 

    if(obj.val().length == 0) 
    { 
     alert('This field can not be blank'); 
     ok = false; 
    } 
    else 
    { 
     var data = { 
      action: 'check', 
      input: obj.attr('name'), 
      value: obj.val() 
     }; 

     $.ajaxSetup({async:false}); // Force program execution to wait for ajax response 
     $.post('database.php', data, function (reply) { 
      if (reply) { 
      alert("This " + obj.attr('name') + " already exists"); 
      ok = false; 
      } 
      $.ajaxSetup({async:true}); // Setup ajax to be async again 
     }); 
    } 
    return ok; 
} 

//When the user submits the form 
$('#info').live('submit', function(e){ 
    e.preventDefault(); 
    var ok = true; 

    //Passes each input to the error() 
    $('.unique').each(function(){ 
     ok = ok && error($(this)); 
    }); 

    if (!ok) { 
     return false; 
    } 

    $.post('database.php', 'action=insert&' + $(this).serialize(), function(r) { 
     alert(reply); 
    }); 
}); 

Answer 2

I가 과거에이 문제를 가지고 :

다음은 제대로 작동합니다 코드 샘플입니다. 이를 피하면 기본 동작을 방지 할 수 있습니다.

$('#info').submit(function(e){ 
e.preventDefault(); 

var ok = true; 
var data = 'action=insert&' + $(this).serialize(); 

//Passes each input to the error() 
$('.unique').each(function{ 
    var temp = err($(this)); 
    ok = ok && temp; 
}); 

if(!ok) return false; 

$.post('database.php', 
     data, 
     function(reply){ 
      alert(reply); 
     }); 
}); 

이렇게하면 양식이 실제로 제출되지 않습니다. 당신은 여전히 ​​아약스 게시물 괜찮 때 제출하려면 다음

$('#info').submit(function(){ 
    var theForm = this; 
    $.post('database.php', 
     data, 
     function(reply){ 
      alert(reply); 
      theForm.submit(); 
     }); 
});