사용자 정의 양식 유효성 검증 및 제출

Question

제출 단추를 선택할 때 양식 유효성 검증을 실행했지만 기본 제출 기능을 실행하지 않으려합니다. 대신 아약스 포스트 코드를 실행하여 서버 측의 데이터를 포스트와 함께 폼에 저장합니다.

기본 제출을 취소하고 아약스 코드를 추가 할 위치를 찾는 데 문제가 있습니다. 여기

내가 여기

$("#formEnroll").validate({ 
    errorElement:"p", 
    submitHandler: function(form) { 
      var phoneNumber = form.day_phone.value;    
      var phoneParts = phoneNumber.split("-"); 
      form.dayArea.value = phoneParts[0]; 
      form.dayPrefix.value = phoneParts[1]; 
      form.daySuffix.value = phoneParts[2];    
      form.submit(); 
    } 

}); 

그리고이 내가

$.ajax({ 
    type: "POST", 
    url: "/php/localProxy.php", 
    data: $('#formEnroll').serialize(), 
    success: function (response) { 
      document.location = 'http://www.xxxx.com/thank-you'; 

    }, 
    error: function() { 
      alert('There was a problem!'); // handle error 
    } 
     }); 

Answer 1

form.submit() 대신 ajax 함수를 호출 할 수 있습니다. form.submit(); 기본 제출을 사용하여 코드를 제출합니다.

$('#formEnroll').on('submit', function(e){ 
     e.preventDefault(); 

     $(this).validate({ 
      errorElement:"p", 
      submitHandler: function(form) { 
       var phoneNumber = form.day_phone.value;    
       var phoneParts = phoneNumber.split("-"); 
       form.dayArea.value = phoneParts[0]; 
       form.dayPrefix.value = phoneParts[1]; 
       form.daySuffix.value = phoneParts[2];    
       submitform(); 
      } 
     }); 
    }) 

    function submitform(){ 
    $.ajax({ 
     type: "POST", 
     url: "/php/localProxy.php", 
     data: $('#formEnroll').serialize(), 
     success: function (response) { 
       document.location = 'http://www.xxxx.com/thank-you'; 

     }, 
     error: function() { 
       alert('There was a problem!'); // handle error 
     } 
    }); 

    } 

Answer 2

당신은 일반적인 형태로, 검증 플러그인을 포장 할 수 대신 기본 제출의 실행하려는 아약스 코드 유효성 검사 코드입니다 표준 실행을 중단하기위한 제출 기능. 대신 당신은 또한 단지 return false;.on 함수의 끝에서 발사에서 기본 이벤트를 중지 할 수 e 이벤트 객체를 사용

$('#formEnroll').on('submit', function(e) 
{ 
    e.preventDefault(); // stop form submission 

    // Run validation 
    $(this).validate({ 
     errorElement:"p", 
     submitHandler: function(form) { 
      var phoneNumber = form.day_phone.value;    
      var phoneParts = phoneNumber.split("-"); 
      form.dayArea.value = phoneParts[0]; 
      form.dayPrefix.value = phoneParts[1]; 
      form.daySuffix.value = phoneParts[2];    
      submitform(); // call your ajax function here 
     } 
    }); 
}); 

function submitform(){ 
    $.ajax({ 
     type: "POST", 
     url: "/php/localProxy.php", 
     data: $('#formEnroll').serialize(), 
     success: function (response) { 
       document.location = 'http://www.xxxx.com/thank-you'; 

    }, 
    error: function() { 
     alert('There was a problem!'); // handle error 
    } 
}); 

.

Answer 3

당신은 제출 (submit) 버튼을 클릭하여 JQuery와에 클릭 이벤트를 사용하여 AJAX로 데이터를 전송할 수 있으며, 그 기능은 return false 그런데 기본 제출을 피하기 위해 당신은 아약스를 사용하여 데이터를 전송하고 기본을 피할 수 있어야 제출.