HTML 형식의 onsubmit 이벤트를 방지하는 Javascript onchange 이벤트가 있습니까?

StackOverflow https://stackoverflow.com/questions/489527

문제

HTML 양식을 고려해보세요.

<form action="" method="POST" onsubmit="return checkValidArray()">
    <input type="text" name="data" onchange="return validate(this);">
</form>

IE 6 및 Firefox 3 모두에서 입력 필드에 텍스트를 입력하고 제출을 클릭하면 입력 필드에 대해 onchange 이벤트가 실행되지만 제출 버튼을 클릭할 때까지 양식에 대해 onsubmit 이벤트가 실행되지 않는 것으로 나타납니다. 두 번째(물론 onchange가 실행되지 않는 시점).즉, onchange는 onsubmit이 실행되는 것을 방지하는 것 같습니다.

사용자가 필드를 종료할 때 양식의 각 필드를 확인하여 즉각적인 유효성 검사 피드백을 제공하고 유효하지 않은 데이터가 있는 경우 양식 제출을 방지하려는 것이 목표입니다.

[편집하다:두 유효성 검사 함수에는 모두 경고()가 포함되어 있습니다.]

이 문제를 어떻게 해결합니까?

도움이 되었습니까?

해결책

(일종의) 해결책:

양식의 onsubmit 이벤트가 실행되지 않게 하는 것은 입력의 onchange 이벤트 중에 단지 경고() 또는 확인()이 존재한다는 것이 밝혀졌습니다.JS 스레드가 경고()에 의해 차단된 것으로 보입니다.
해결 방법은 입력의 onchange 호출에 경고() 또는 확인()을 포함하지 않는 것입니다.

영향을 받는 것으로 알려진 브라우저:
IE6 - 윈도우
IE8 - 승리
FF3 - 승리

영향을 받지 않는 것으로 알려진 브라우저:
Google 크롬 - 승리
사파리 - 맥
FF-맥

다른 팁

다음 코드를 사용하여 Firefox 3(Mac)을 사용해 보았습니다.

    <html>
        <head>
            <script>
                function validate(ele)
                {
                    alert("vali");
                    return false;
                }

                function checkValidArray()
                {
                    alert("checkValidArray");
                }

            </script>
        </head>
        <body>
            <form action="" method="POST" onsubmit="return checkValidArray()">
                <input type="text" name="data" onchange="return validate(this);">
                <input type="submit" value="Ok">
            </form>
        </body>
</html>

작동하는 것 같습니다.Ok 버튼을 클릭하면 "Vali"와 "Check Valid Array" 팝업이 모두 나타납니다.처음에는 나는 생각했다 return false 양식이 제출되지 않았지만 제출된 이유일 수 있습니다(적어도 checkValidArray() )이라고 합니다.

지금, 당신은 무엇을하고 있습니까? checkValidArray() 그리고 validate() 행동 양식?뭔가 특별한?코드를 게시할 수 있나요?

편집하다:Windows에서 IE8 및 FF3을 사용하여 테스트했는데 여기서 두 이벤트가 모두 실행되지 않습니다.왜 그런지 모르겠습니다.아마도 onblur가 해결책일 수도 있지만 onchange가 작동하지 않는 이유는 무엇입니까?특별한 이유가 있나요, 아니면 또 다른 불일치인가요?(Mac의 FF와 Safari 모두에서 작동)

onchange 대신 입력에 onblur 이벤트를 사용할 수 있습니다.

Mac에서는 동작이 다르기 때문에 브라우저에 종속되지 않고 플랫폼에 따라 다르게 나타난다는 점이 매우 흥미롭습니다.어딘가에 단서가 있을 텐데...

Nivas의 코드로 onblur를 시도했지만 onchange와 동일한 결과를 얻었습니다("Vali" 경고만 표시됨).

차이를 만드는 것은 당신이 하느냐 여부입니다. 아무것 유효성 검사()에서.Alert("vali"); 행을 주석 처리합니다.그리고 그것은 작동합니다!(validate()의 실제 반환 값은 중요하지 않지만 예상하지는 않습니다.)

편집하다:동료가 Windows의 Google Chrome에서 이 작업을 시도했는데 작동합니다.이는 Chrome이 JS 스레드를 분리하는 방식 때문에 직관적으로 이해됩니다.

스레드를 차단하는 첫 번째 경고() 관련 문제로 인해 onsubmit 이벤트가 손실됩니다.가능한 경쟁 조건?

생성하지 마십시오.제출 버튼.대신 일반 버튼을 만들고 해당 버튼으로 onClick을 호출할 수 있는 함수를 작성하세요.

함수는 양식 필드에 대한 유효성 검사를 수행하고 모든 것이 정상이면 양식을 제출합니다.그렇지 않으면 그렇지 않습니다.

function validate
{
  "Piece of code to Validate your form"
  document.formName.action.value = "URL which you want to call"
 document.propFile.submit(); // It will submit he page
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top