양식을 제출하기 전에 $ .get() 호출을 기다릴 수 있습니까?

Question

이름, 성, 사용자 이름, 암호 및 전자 메일 주소를 묻는 가입 양식이 있습니다. 두 개의 별도 $ .get() 메서드를 사용하여 사용자 이름과 전자 메일 주소가 없는지 확인합니다. 다른 필드가 비어있는 사용자 이름 및/또는 이메일 주소가 존재하는 경우, 양식

function validateSignUp() { 
     var firstName = $("#first-name").val(); 
     var lastName = $("#last-name").val(); 
     var username = $("#username").val(); 
     var password = $("#pass").val(); 
     var email = $("#email").val(); 
     var passwordVerifier = $("#retype-pass").val(); 
     var emailVerifier = $("#retype-email").val(); 

     errorMessage = ""; 
     var isUsernameValid = validateUsername(username); 

     var isError = false; 

     // validate first name field 
     if (firstName == "" || lastName == "") { 
      isError = true; 
      $("#error-message").html("All fields are required"); 
     } 

     // validate password 
     if (validatePassword(password) == false) { 
      isError = true; 
      $("#check-password").html("Password is invalid"); 
     } 
     else { 
      $("#check-password").html(""); 
     } 

     // validate password verifier 
     if (passwordVerifier == password) { 
      if (validatePassword(passwordVerifier) == false) { 
       isError = true; 
       $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters"); 
      } 
      else { 
       if (password != passwordVerifier) { 
        isError = true; 
        $("#recheck-password").html("Minimum of 6 characters and maximum of 30 characters "); 
       } 
       else { 
        $("#recheck-password").html(""); 
       } 
      } 
     } 
     else { 
      isError = true; 
      $("#recheck-password").html("Passwords didn't match"); 
     } 

     // validate username field 
     if (isUsernameValid == false) { 
      isError = true; 
      $("#check-username").html("Alphanumeric characters only"); 
     } // if 
     else if (isUsernameValid == true) { 
      $.get("/account/checkavailabilitybyusername", { username: username }, 
        function(data) { 
         if (data == "Not Existing") { 
          $("#check-username").html(""); 
         } 
         else if (data == username) { 
          isError = true; 
          $("#check-username").html("Sorry, this username is already registered"); 
         } 
        } 
        ); 
     } // else 
     // validate e-mail address field 

     if (validateEmail(email) == false) { 
      isError = true; 
      $("#check-email").html("Sorry, the e-mail you typed is invalid"); 
     } // if 
     else if (validateEmail(email) == true) { 
     $.get("/account/checkavailabilitybyemail", { email: email }, 
        function(data) { 
     if (data == "Not Existing") { 
          $("#check-email").html(""); 
         } 
         else if (data == email) { 
         isError = true; 
          $("#check-email").html("Sorry, this e-mail is already registered"); 
         } 
        }); 
       } 
       if (isError == true) { 
        return false; 
       } 
     return true; 
    } 

제출되지 않습니다

이 제 기능입니다. get 메소드의 콜백 함수도 호출됩니다. 그러나 빈 필드가없는 양식을 제출할 때 $ .get()에 의해 사용자 이름 및/또는 전자 메일을 확인하지 않고 자동으로 제출됩니다. 내 기능에 문제가 있거나 아직 어떤 것을 발견하지 못했습니다. 감사.

Answer 1

ajax() 전화를 사용하고 async 속성을 false으로 설정해야합니다. 이렇게하면 요청이 동기화됩니다. 즉, 브라우저가 다른 작업을 수행 할 때까지 기다려야합니다. 이것을 시도하십시오 :

$.ajax({ 
    url: "/account/checkavailabilitybyemail", 
    data: { email: email }, 
    async: false, 
    success: function(data) { 
     if (data == "Not Existing") { 
      $("#check-email").html(""); 
     } else if (data == email) { 
      isError = true; 
      $("#check-email").html("Sorry, this e-mail is already registered"); 
     } 
    }) 
}); 

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

Answer 2

주 기능에서는 $.get()이 반환 될 때까지 직접 기다릴 수 없습니다. 하지만 당신은 (실제 폼 요소에 대한 참조를 포함 form를 가정) AJAX 호출의 성공 콜백 양식 제출을 이동할 수 있습니다

참고하지만, 다음 양식 제출 가 AJAX에을 의존 돌려 주다. JS가 응답하지 않거나 사용자가 JS를 사용할 수없는 경우 가장 유용한 것은 시간 초과 (window.setTimeout() 포함) 및 서버 측 유효성 검사입니다.

Answer 3

두 개의 원격 규칙을 사용하여 Jquery의 유효성을 검사하는 것이 좋습니다. 매우 구현하기 쉽고 성숙한 플러그인입니다. 이렇게하면 UX의 다른 측면에 집중할 수 있으며 프로젝트의 다른 양식의 유효성을 검사해야 할 경우이 유효성 검증 논리를 다시 구현할 필요가 없습니다.