ajax() 호출로 양식 검사기가 유효성 검사를 수행하지 않습니다.

Question

나는이 form validator 및 ajax(); 호출을 사용하여 데이터베이스에 이메일이 있는지 확인한 후 표시 될 오버레이를 채 웁니다. PHP 파일은 등록 양식이나 로그인 양식이 표시 될지 여부를 결정합니다.

현재 문제는 도착시 누군가가 제출 버튼을 클릭하면 (아무것도 작성하지 않고) ajax 호출이 이루어지고 유효성 검사가 생략된다는 것입니다. 안전 조치가 갖추어져 있지만 방문자가 이미 사용자 인 경우 방문자가 등록 양식에 가기 전에 이메일을 테스트하게하십시오.

이 여러 가지 방법으로 테스트했지만 아무 것도 작동하지 않는 것 같습니다.

기타 기능 :

//turn overlay on/off 
function overlayOff() {$("#olContainer").html('');$('#overlay').css({ "display":"none" });} 
function overlayOn() {$('#overlay').css({ "display":"block" });} 

Ajax 호출 :

//ajax call 
function loadLoginFormOverlay(form) { 
    event.preventDefault(); // Stop form from submitting normally 
    $("#olContainer").html(''); //Clear result div 
    var values = form.serialize(); // Get some values from elements on the page: 
    $.ajax({ // Send the data using post and put the results in a div 
     url: "../inc/formLogin.php", 
     type: "post", 
     data: values, 
     success: function(){ 
      $("#olContainer").load('../inc/formLogin.php'); 
      overlayOn(); 
     }, 
     error:function(){ 
      $("#olContainer").html('An error occurred while submitting your email, please refresh your browser and try again.<br>We are sorry for the inconvenience.'); 
      $("#olContainer").append('<input name="Close" type="submit" class="buttsubmit" id="olCloseBtn" value="Close" title="Close" />'); 
      overlayOn(); 
     } 
    }); 
} 

귀속 :

//binding the submit event to the ajax call 
$("#preLoginForm").submit(function(event) { 
loadLoginFormOverlay($(this)); 
}); 

$("#clientForm").submit(function(event) { 
loadLoginFormOverlay($(this)); 
}); 

확인 :

//executes validation 
$.validate({ 
    form : '#preLoginForm, #clientForm',// Header preLoginForm && clientForm validation and AJAX call on success eventHandler 
    modules: 'security, location', // security for email confirmation, location for country suggestion 
    onModulesLoaded : function() { 
     $('input[name="clCountry"]').suggestCountry(); //activate country suggestion 
    }, 
    onError : function() { 
     return false; //event.preventDefault(); 
    }, 
    onSuccess : function() { 
     return false;//event.preventDefault(); 
    } 
}); 

유효성 검사를 통해 생성 된 onSuccess 이벤트 내에 제출 이벤트 바인딩을 배치하려했지만 ajax 호출이 발생하지 않습니다. Found someone with the same problem, not solved.

onSuccess 이벤트가 발생하여 true로 지정 될 때까지 false가되는 부울을 사용했지만 변경된 값을 인식하기 위해 2clicks가 필요했습니다.

유효성 검사를 변수에 지정하려고 했으므로 조건문의 일부로 사용됩니다.

그리고 아이디어가 없어졌습니다. 아무도 저를 구할 수 있습니까? xD 오, 나는 굉장히 많이 봤지만 크롤러가 아프다 고 생각합니다. p

Answer 1

좋아, 나는 마침내 실제로 내가 원하는 결과를 얻었습니다. AJAX 호출은 onSuccess 유효성 검사 이벤트에서 호출 할 수 있어야한다고 생각하지만 유효성 검사가 성공적으로 수행 된 경우에만 트리거됩니다. 이에 대한 아이디어는 언제나 환영합니다.

기본적으로 제출 바인딩 내에서 입력 값에 대한 기존 전자 메일을 테스트했습니다. 이 방법은 값없이 작동하지 않습니다. (검증은 필수 매개 변수에 대한 계정을하지 않습니다,하지만 예상대로 작동하지 않습니다)

코드 변경 :

$("#preLoginForm").submit(function(event) { 
    if ($("#preLoginEmail").val()=="") { 
     return false; 
    } else {  
     loadLoginFormOverlay($(this)); 
     return false; 
    } 
}); 

$("#clientForm").submit(function(event) { 
    if ($("input[name='clEmail']").val()=="" && $("input[name='clEmail_confirmation']").val()=="") { 
     return false; 
    } else {  
     loadLoginFormOverlay($(this)); 
     return false; 
    } 
}); 

사람이 작업을 수행 할 수있는 쉬운 방법을 찾아, 또는 I가 있었다 이유를 설명 할 수있는 경우 이 결과를 얻으려면이 과정을 거치십시오. 감사하게 생각합니다.