[javascript] 클라이언트 측에서 양식이 여러 번 제출되는 것을 방지하는 방법은 무엇입니까?

응답이 느리면 제출 버튼을 여러 번 클릭 할 수 있습니다.

이런 일이 발생하지 않도록 방지하는 방법은 무엇입니까?



답변

이미 제출 된 양식에서 제출 이벤트를 비활성화하려면 눈에 잘 띄지 않는 자바 스크립트를 사용하십시오. 다음은 jQuery를 사용하는 예입니다.

편집 : 제출 버튼을 클릭하지 않고 양식을 제출하는 문제를 수정했습니다. 고마워, 이치 반.

$("body").on("submit", "form", function() {
    $(this).submit(function() {
        return false;
    });
    return true;
});


답변

asp mvc 3 unobtrusive validation과 함께 vanstee의 솔루션 을 시도 했으며 클라이언트 유효성 검사가 실패하면 코드가 계속 실행되고 양식 제출이 영구적 으로 비활성화됩니다. 필드를 수정 한 후 다시 제출할 수 없습니다. (bjan의 의견 참조)

그래서 vanstee의 스크립트를 다음과 같이 수정했습니다.

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});


답변

클라이언트 측 양식 제출 제어는 onsubmit 핸들러가 제출 단추를 숨기고로드 애니메이션으로 대체함으로써 매우 우아하게 달성 할 수 있습니다. 이렇게하면 사용자가 자신의 행동 (클릭)이 발생한 지점에서 즉각적인 시각적 피드백을받을 수 있습니다. 동시에 양식이 다른 시간에 제출되는 것을 방지합니다.

XHR을 통해 양식을 제출하는 경우 제출 오류 (예 : 시간 초과)도 처리해야합니다. 사용자 양식 다시 제출 해야 하므로 제출 단추를 다시 표시해야합니다 .

또 다른 메모에서 llimllib는 매우 유효한 지점을 제시합니다. 모든 양식 유효성 검사는 서버 측에서 발생해야합니다. 여기에는 여러 제출 확인이 포함됩니다. 클라이언트를 신뢰하지 마십시오! 자바 스크립트가 비활성화 된 경우에만 해당되는 것은 아닙니다. 모든 클라이언트 측 코드를 수정할 수 있음을 명심해야합니다. 상상하기는 다소 어렵지만 서버와 대화하는 html / javascript가 반드시 작성한 html / javascript가 아닐 수 있습니다.

llimllib가 제안한대로 해당 양식에 대해 고유 한 식별자로 양식을 생성하고 숨겨진 입력 필드에 넣습니다. 그 식별자를 저장하십시오. 양식 데이터를 수신 할 때 식별자가 일치 할 때만 처리합니다. (또한 추가 보안을 위해 식별자를 사용자 세션에 연결하고 일치시킵니다.) 데이터 처리 후 식별자를 삭제합니다.

물론 가끔 양식 데이터가 제출되지 않은 식별자를 정리해야합니다. 그러나 아마도 귀하의 웹 사이트는 이미 일종의 “가비지 수집”메커니즘을 사용하고있을 것입니다.


답변

<form onsubmit="if(submitted) return false; submitted = true; return true">


답변

이를 수행하는 간단한 방법은 다음과 같습니다.

<form onsubmit="return checkBeforeSubmit()">
  some input:<input type="text">
  <input type="submit" value="submit" />
</form>

<script type="text/javascript">
  var wasSubmitted = false;
    function checkBeforeSubmit(){
      if(!wasSubmitted) {
        wasSubmitted = true;
        return wasSubmitted;
      }
      return false;
    }
</script>


답변

클릭 직후 제출 버튼을 비활성화하십시오. 유효성 검사를 올바르게 처리해야합니다. 또한 모든 처리 또는 DB 작업을위한 중간 페이지를 유지하고 다음 페이지로 리디렉션합니다. 이렇게하면 두 번째 페이지를 새로 고침해도 다른 처리가 수행되지 않습니다.


답변

현재 시간을 해시하고 양식에 숨겨진 입력으로 만듭니다. 서버 측에서 각 양식 제출의 해시를 확인하십시오. 이미 해당 해시를 받았다면 반복 제출이있는 것입니다.

편집 : 자바 스크립트에 의존하는 것은 좋은 생각이 아니므로 모든 사람들이 계속해서 그 아이디어를 찬성 할 수 있지만 일부 사용자는이를 활성화하지 않을 것입니다. 정답은 서버 측에서 사용자 입력을 신뢰하지 않는 것입니다.