jQuery : AJAX가 끝나면 양식을 제출하십시오.

Question

양식을 제출할 때 제출하기 전에 양식을 제출하기 전에 유효성 확인을 수행하고 싶습니다. 꽤 똑바로 전 생각합니다. 그래서 폼에 제출 핸들러를 설정하고 AJAX 검사를 수행하기를 원했고, 완료되면 모든 것이 좋다면 평소대로 제출하십시오.

나는 이것을 시도, 그것은 매우 분명한 이유 실패 : 어떤 문자를 해당 필드에있는 경우 checkTitle 및 checkMessage 그냥 확인하는 동안

$.when(checkUsername()).done(function (a) { 
    checkTitle(); 
    checkMessage(); 

    if (userValid && titleValid && messageValid) { 
     return true; 
    } 
}); 

return false; 

checkUsername가하는 $.post입니다. 각 함수는 userValid, titleValid 및 messageValid의 유효성을 검사하여 해당 값을 true 또는 false로 설정합니다. 두 개의 입력 필드와 텍스트 영역 필드에는 각 관련 함수에 첨부 된 흐림 효과가 있으므로 사용자가 제출을 클릭하기 전에도 양식의 유효성이 검사됩니다.

마지막으로 false를 반환하면 양식이 제출되지 않습니다. 하지만, 원래는 유효한 체크가 아닌 곳에서 유효 체크가 이루어졌고 사용자가 3 개의 유효한 항목을 입력 한 다음 필드를 지우고/흐리게 표시하지 않고 직접 제출을 클릭하면 여전히 유효합니다. 왜냐하면 AJAX가 여전히 처리 중이기 때문에 현장은 두 번째 검사를받지 않았기 때문입니다.

기본적으로 양식은 AJAX가 완료 될 때까지 제출을 기다리고 싶습니다. 그러나 submit() 함수는 AJAX가 끝나기 전에 반환을 처리 할 것이고, 제출할 때 AJAX가 필요하기 때문에 done에 넣을 수는 없습니다. 본질적으로 잡아라.

나는 그것을하는 지저분한 방법이라고 느꼈다. 그러나 내가 지금 생각할 수있는 유일한 방법이다. 이것이 유일한 방법 인 경우 조언을 사용할 수있다. 그것을하거나, 내가 가지고있는 다른 선택 사항들. AJAX를 통해 양식을 제출할 수 있다는 것을 알고 있지만 어떤 옵션을 사용할 수 있는지 알고 싶습니다.

이때

if (validated) return true; 
else { 
    $form = $(this); 
    $.when(checkUsername()).done(function (a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      validated = true; 
      $form.submit(); 
     } 
    }); 

    return false; 
} 

는 오직 AJAX 설정 마스터 유효성 변수가 있고, 완료되면 시스템이 다시 전송 :이 지저분 방법이다.

Answer 1

당신의 해결책은 갈 길입니다. .done 메서드는 비동기 실행 때문에 다른 컨텍스트를 가지므로 유효성 검사 메서드가 호출시 항상 false를 반환합니다.

Answer 2

유효성 검사가 비동기이므로 약간의 트릭을 수행해야합니다. 양식 데이터가 유효한지 확인하려면 .data() 함수를 사용할 수 있습니다. 그렇지 않으면 유효성 검사를 수행합니다. 유효성 검사에서 validated 데이터를 true로 설정하고 jquery를 통해 submit을 다시 트리거 할 수 있습니다.

자바 스크립트 유효성 검사를 무시할 수 있기 때문에 양식 서버 측에서받은 데이터의 유효성을 계속 확인하시기 바랍니다.

$(form)을 양식 요소 나 쿼리로 대체해야합니다.

$(form).submit(function(event) { 
    //check if already validated 
    if (!$(this.data("validated")) { 

     doValidation(); 
     //prevent form form submitting because validation is in progress. 
     event.preventDefault(); 
    } 

}); 



function doValidation() { 

    //do you validation suff. 
    $.when(checkUsername()).done(function(a) { 
     checkTitle(); 
     checkMessage(); 

     if (userValid && titleValid && messageValid) { 
      //mark the form as validated 
      $(form).data("validated", true); 
      //trigger submit via jquery 
      $(form).submit(); 
     } 
    }); 

} 

은 또는 당신이 (당신이 어떤 파일 입력 요소가없는 경우에만 작동)을 아약스 길을 갈 및 $.post에 양식을 게시 할 수 있습니다.

$.post($(form).attr("action), $(form).serialize());