폼을 제출하기 전에 아약스 유효성 검사가 완료 될 때까지 기다리는 방법?

Question

validateUsername 함수가 서버 측에서 사용자 이름 검사를 완료하기 전에 양식을 제출하는 데 문제가 있습니다.

validateUsername 함수가 완료된 후에 만 ​​양식을 어떻게 제출합니까? 이 분명하다 희망 ...

form.submit(function(){ 
    if (validateUsername() & validateEmail() & validatePassword()) { 
     return true; 
    } else { 
     return false; 
    } 
});   

function validateUsername(){    
    usernameInfo.addClass("sign_up_drill"); 
    usernameInfo.text("checking..."); 
    var b = username.val(); 
    var filter = /^[a-zA-Z0-9_]+$/;  
    $.post("../username_check.php",{su_username:username.val()},function(data) { 
     if (data=='yes') { 
      username.addClass("error"); 
      usernameInfo.text("sorry, that one's taken"); 
      usernameInfo.addClass("error"); 
      return false;   
     } else if (!filter.test(b)) { 
      username.addClass("error"); 
      usernameInfo.text("no funny characters please"); 
      usernameInfo.addClass("error"); 
      return false; 
     } else { 
      username.removeClass("error"); 
      usernameInfo.text("ok"); 
      usernameInfo.removeClass("error");  
      return true;  
     } 
    });    
} 

Answer 1

자세한 내용은 Olafur의 답변 - AJAX 호출이 만들어지고 함수가 대기없이 반환됩니다.

양식을 제출할 때까지 콜백이 완료되지 않습니다.

당신이해야 할 일은 AJAX 유효성 검사를 호출하는 버튼/트리거가 있어야하며 콜백은 true를 반환하는 대신 양식을 제출해야합니다.

Answer 2

당신은 AJAX 호출에서 반환 할 수 없습니다. jQuery FAQ this section을 읽어 보시기 바랍니다. 특히 콜백에 관한 부분. (마지막 코드 스 니펫)

Answer 3

1) 양식에 숨겨진 필드가있는 것이 좋습니다.
2) AJAX 요청을하는 함수를 호출하기 전에 값을 0으로 설정하십시오.
3) 각 함수의 유효성을 검사 할 때 값을 증가시킵니다.
4) 숨겨진 필드의 값을 확인하기 전에 몇 초 (예 : 모든 AJAX 요청을 완료하는 데 걸리는 시간/제한 시간 + 몇 초)를 대기하도록 설정하십시오. 값이 3인지 (유효성 검사를 위해 3 회의 AJAX 호출이 있었는지) 확인한 후 제출하십시오.

컨트롤이 포커스를 잃을 때 유효성 검사를하는 것이 좋습니다. 모든 컨트롤이 유효성 검사를 통과 한 경우에만 제출 단추를 사용하십시오.

미안하지만 JQuery에 익숙하지 않지만 일반 자바 스크립트를 사용한다면이 작업을 수행 할 것입니다.

Answer 4

jQuery form validation plugin이 처리해 줍니다 .- 적극 권장합니다.

일부 샘플 코드 : jQuery를에

$("#myform").validate({ 
    rules: { 
    email: { 
     required: true, 
     email: true 
    }, 
    username: { 
     required: true, 
     remote: { 
     url: "../username_check.php", 
     type: "post", 
     } 
     } 
    } 
    } 
}); 

Answer 5

같은 대한 해결책이있다. 일부 자바 스크립트 중에 내 응용 프로그램에 사용자가 존재하는지 여부를 확인해야합니다. 당신이 당신의 아약스 백엔드에서 결과를받은 후

var pars = "username="+ username; 
var some = $.ajax({url: 'AjaxUserNameExist.php', 
    type: 'GET', 
    data: pars, 
    async: false 
}).responseText; 


if(some=="1") //this is value Got from PHP 
{ 
    alert("We cannot Go"); 
    return false; 
} 

if(some=="0") 
{ 
    alert("We can Go"); 
    return true; 
} 

Answer 6

왜 그냥 $('#yourFormId').submit();를 사용 해달라고 : 다음 코드는?

Answer 7

최근에 비슷한 문제가 발생했습니다. 경우에 따라 입력 필드에서 Enter 키를 누르면 양식이 제출 될 수 있습니다. 필자는 여러 가지 방법으로이 문제를 해결하기 위해 시도한 다음 사양을 변경해야 Enter 키를 누르거나 장치로 이동하여 양식을 제출할 수 있습니다. 내 솔루션은 당시 나에게 의미가 있었던 것입니다.

var form_submit = false; 

function validateInput() { 

    var field_value = $('#username').val(); 

    $.post('validation.php', {'input': field_value }, function (d) { 
     if (d.valid) { 

      form_submit = true; 
      $('form').submit(); 

     } else { 

      //error message or whatever 

     } 
    }, 'json'); 

} 

$('form').submit(function() { 

    if (form_submit) { 
     return true; 
    } else { 
     validateInput(); 
     return false; 
    } 

});