내 onsubmit 함수가 일찍 종료되고 false를 반환하지 않는 이유는 무엇입니까?

Question

<form method="post" action="/Order/CheckOut/" onSubmit="return Validate()"> 

하고 ...

function Validate() { 
    alert($("#email").val()); 
    return false; 
} 

나는 그것이 잘 작동 경고를 꺼낼 때 엉망 부분은, (가) 실패 제출하지만 난에 경고를 넣을 때, 그것은 가고 제출 할 수 있습니다 ... 도대체 뭐야?

내가 불을 지르고와 JS를 통해 단계 및 상기 어기면 ... 그것은 return 문에 그것을 만들 결코,

function Validate() { 
    if(document.getElementByID("email").value == "test"){ 
     alert("It says test."); 
    } 
    return false; 
} 

와 같은 동작을 가지고 :

나는 또한이 시도 경고 또는 if (위 버전에 따라 다름)가 멈추고 'step into'을 클릭하면 양식을 제출합니다. 왜 반환 false line으로 보내지 않습니까?

Answer 1

왜 try 블록으로 감싸지 않습니까?

function Validate() { 
    try { 
     alert($("#email").val()); 
    } catch (e) { 
     alert("Problem: " + e); 
    } 

    return false; 
} 

Answer 2

대신 event.preventDefault()을 사용할 수 있습니다.

$("form[name='myForm']").submit(function(e){ 
    e.preventDefault(); 
    alert($("#email").val()); 
}); 

자바 스크립트, CSS 및 HTML은 모두 별도로 유지해야합니다. 프로젝트를 통합하지 마십시오. 그렇지 않으면 프로젝트 관리가 어려워집니다. HTML에서 onsubmit 속성을 사용하는 대신 위에서 수행 한 것처럼 자바 스크립트에서 양식의 $.submit() 메소드에 로직을 추가하기 만하면됩니다.

이 예제에서는 양식에 "myForm"이라는 이름을 지정했다고 가정합니다. submit 이벤트를 처리하는 양식을 itendify해야하고 일반 $("form") 선택자를 사용하지 않아야하므로 예제에서이 예제를 사용했습니다.

Answer 3

이미 jQuery를 사용하고 있다면 처음부터 잘못하고있는 것입니다. <form> 요소 내에서 onSubmit 처리기를 수동으로 지정하면 안됩니다. @Jon 님이 제출 이벤트를 제안하고 바인드하면됩니다.

$("form").submit(function() { 
    alert($("#email").val()); 
    return false; 
}); 

Answer 4

문제는 함수가 true를 반환하는 것이 아닙니다. 문제는 경고의 JavaScript가 실패하고 JavaScript가 코드를 해석하지 못하는 것입니다. 어느 시점에서 브라우저는 양식을 제출할 기본 조치를 계속 수행하고 있습니다.

이 때문에 Jonathan Sampson이 alert() 전에 e.preventDefault()를 사용하는 것이 좋습니다. 이렇게하면 alert()가 실패 할 때 브라우저가 기본 동작을 계속하지 않습니다.