JQuery, AJAX 및 PHP를 사용하여 HTML 양식 유효성 확인

Question

JQUERY를 사용하여 클라이언트 측에서 등록 양식의 유효성을 검사합니다. 또한 AJAX 요청을 사용하여 PHP 파일을 확인하고 전자 메일이 유효한 전자 메일인지, 다른 사용자가 사용하고 있지 않은지 확인합니다. 모든 것은 AJAX 성공이 완료되기 전에 양식이 제출되는 것만 큼 훌륭하게 작동합니다. 이것은 일반적인 문제입니까? 어떻게 이것을 막을 수 있습니까?

내 JQUERY/AJAX :

<script> 
$(document).ready(function() { 

    $(".form-row-error").hide(); 

    $("#signup").submit(function() { 

     $(".form-row-error").hide(); 
     var error= false; 

     var dataString = $(this).serialize(); 

     var fname= $("#fname").val().trim(); 
     var lname= $("#lname").val().trim(); 
     var email= $("#email").val().trim(); 
     var username= $("#username").val().trim(); 
     var password1= $("#password1").val().trim(); 
     var password2= $("#password2").val().trim();    

     if (fname == 0) { 
      $("#field1").show(); 
      error= true; 
     } 

     if (lname == 0) { 
      $("#field2").show(); 
      error= true; 
     } 

     if (email == 0) { 
      $("#field3").show(); 
      error= true; 
     } 
     else { 
      // Run AJAX email validation and check to see if the email 
is already taken 
      $.ajax({ 
       type: "POST", 
       url: "checkemail.php", 
       data: dataString, 
       success: function(data) { 
        if (data == 'invalid') { 
         alert('invalid email'); 
         error= true; 
        } 
        else if (data == 'taken') { 
         alert('email taken'); 
         error= true; 
        } 
       } 
      }); 
     } 

     if (username == 0) { 
      $("#field4").show(); 
      error= true; 
     } 

     // Checks to see if the username is already in use, if so show the 
field4 secondary error 
     if (username != 0) { 
      // Script to check the username against the database and 
shows the error if applicable 
      // $("#field4-secondary").show(); 
      // error= true; 
     } 

     if (password1 == 0) { 
      $("#field5").show(); 
      error= true; 
     } 

     if (password2 == 0) { 
      $("#field6").show(); 
      error= true; 
     } 

     // Checks and makes sure both password fields have been filled 
     if (password1 != 0 && password2 != 0) { 
      // Checks to see if the passwords match, if not show the 
field5 secondary error and reset the password fields 
      if (password1 != password2) { 
       $("#field5-secondary").show(); 
       $("#password1").val(""); 
       $("#password2").val(""); 
       error= true; 
      } 
     } 

     if (error == true) { 
      return false; 
     } 

    }); 

}); 
</script> 

일부 배경 :

아약스 성공 경고는 내가 다른 필드를 비워 둘뿐만 아니라 이메일에 오류가있을 경우 나타날 수있는 기회가있다. 어떤 점에서 AJAX 요청이 스크립트의 다음 부분이 시작되기 전에 완료 할 기회가 없다고 생각하게 만듭니다.

내 PHP 파일은 문제가되지 않습니다.

JSON 사용에 관심이 없습니다. 간단한 텍스트를 반환하는 것이 더 쉽습니다. 나는 JQuery와 1.7.1

Answer 1

을 사용하고

는

난 당신의 코드를 보면서 당신은 비동기 수행하지 않는 것을 발견 : 이메일을 확인하는 동안 JQuery와 허위.

asych:false //make request synchronous 

asynch : false는 다음 명령문으로 넘어 가기 위해 실행해야하는 명령문을 의미합니다.

Answer 2

preventDefault()을 제출에 추가하면 원래 제출 동작이 무시됩니다.

$("#signup").submit(function(event){ 
     event.preventDefault(); // <-- add this 

이제 기본 행동이 비활성화되어 제출, 당신이 아약스를 통해 포스트 양식을 호출 할 수 있습니다

그래서 당신의 코드는 다음입니다.

$.post('myurl.php' , $this.serialize() , function(data) { 
     //return data once post (submit) is complete 

    }); 

---

을 또는 당신은 당신의 코드를 구조 조정하고, 함수의 내부에 검증을 배치 할 수 있습니다 : 모든 것이 확인되면 그래서, 당신은 간단하게 그냥이를 호출합니다. 이처럼 :

function validateFields() { 
    if (fname==0){return false;} 
    //place all your validation including ajax here 
    return true; 
} 

는 그런 다음 형태로, 단순히 이렇게 :

<form onSubmit="return validateFields()"> 

그런 식으로 당신의 기능 (즉 유효성 검사 오류를) false을 반환하는 경우, 다음 양식을 제출하지 않을 것이다 .

Answer 3

함수의 결과가 해당 함수에서 작성한 Ajax 호출의 리턴 값에 종속되도록하려고합니다.

아약스는 비동기식이므로 cannot do that입니다.

대신 해당 필드에 대해 change 이벤트가 발생하면 입력 된 데이터가 올바른지 테스트하는 Ajax를 실행하십시오. 결과를 어딘가에 저장하십시오 (가능하면 요소의 데이터 속성에 있음).그 즉시 데이터를 다시 변경하기로 결과를 제거합니다 (그러나 새로운 Ajax 응답이 도착했을 때 그것을 다시 넣어) 그런 다음 다음과 같은 상황 중 하나가됩니다

:

필드가 유효하지 않은 것으로 표시 그래서 당신이 할 수있는 정상적인 검증 루틴에서 false를 반환합니다.

유효하고 유효한 것으로 표시된 필드는이므로 true를 반환하고 정상적으로 제출할 수 있습니다.

Ajax 요청이 아직 비행 중이므로이므로이 필드는 유효하고 서버 측 유효성 검사를 통해 문제를 파악할 수 있습니다.