AJAX 폼 유효성 검사 제출시

Question

양식을 유효하게하는 백엔드 기능이 있습니다.이 기능을 사용하고 있는데 양식 제출이 유효하지 않은 동안에도 완벽하게 작동합니다. 양식이 유효한 경우 그것은 반환 '유효'때

$('form.ajaxpost').submit(function(event) { 
 
     var valid = true; 
 
     event.preventDefault(); 
 

 
     var form = $(this); 
 
     var sbmtBtn = form.find('input[type=submit]'); 
 
     var sbmtBtnTxt = sbmtBtn.val(); 
 
     sbmtBtn.val('Validating ...').attr('disabled', 'disabled'); 
 

 
     $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) { 
 
      if (data != 'valid') { 
 
       valid = false; 
 
       $('body').find('script').append(data); 
 
       $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800); 
 
       sbmtBtn.val(sbmtBtnTxt).attr('disabled', null); 
 
       return false; 
 
      } 
 
      form.trigger('submit'); 
 
     }) 
 
    });

: 내 백 엔드가 '유효'문자열을 반환하고 내가 POST 액션

이에게 다시 폼을해야하는 코드입니다 양식 tr '제출'을 몇 번이고 반복해서 : (

Answer 1

는 것 같다. 작동 그래서 방법은 지금, 작업 코드

$('form.ajaxpost').submit(function(event) { 
 
     event.preventDefault(); 
 

 
     var form = $(this); 
 
     var sbmtBtn = form.find('input[type=submit]'); 
 
     var sbmtBtnTxt = sbmtBtn.val(); 
 
     sbmtBtn.val('Validating ...').attr('disabled', 'disabled'); 
 

 
     $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) { 
 
      if (data != 'valid') { 
 
       $('body').find('script').append(data); 
 
       $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800); 
 
       sbmtBtn.val(sbmtBtnTxt).attr('disabled', null); 
 
       return false; 
 
      } else { 
 
       $.post(form.attr('action'), form.serialize()); 
 
       window.location = form.attr('action'); 
 
      } 
 
     }) 
 
    });

Answer 2

코드에는 종료 조건이 없습니다. 그러므로 제출 버튼이 반복적으로 트리거됩니다.

유효성 확인 후 한 번만 제출한다고 가정합니다. 코드를이 코드로 변경하십시오. 이벤트에서 preventDefault 다시 양식을 다시 제출 할 수있는 방법이없는 것처럼이 문제를 해결

var called_once = false; // identifier 

$('form.ajaxpost').submit(function(event) { 
    var valid = true; 
    event.preventDefault(); 

    var form = $(this); 
    var sbmtBtn = form.find('input[type=submit]'); 
    var sbmtBtnTxt = sbmtBtn.val(); 
    sbmtBtn.val('Validating ...').attr('disabled', 'disabled'); 

    $.post("/application/index/validate-form", form.serialize() + '&formname=' + form.attr('name'), function(data) { 
     if (data != 'valid') { 
      valid = false; 
      $('body').find('script').append(data); 
      $('html, body').animate({scrollTop: $(".has-error:first").offset().top}, 800); 
      sbmtBtn.val(sbmtBtnTxt).attr('disabled', null); 
      return false; 
     } 

     // triggering submit only when it is not called previously 
     if (called_once === false) { 
      form.trigger('submit'); 
      called_once = true; 
     } 
    }) 
}); 

희망 ...