이 표시됩니까?

Question

더 구체적으로, 정보가 있어야하는 빈 양식을 제출할 때 "값을 입력하십시오"라는 경고를 보내야합니다. 그러나이 경고는 알맞은 값을 선택한 후에도 여전히 제출시 이메일을 보냅니다. 나는 오류가있는 경우 제출할 때 이메일을 보내기 전에 양식의 요구 사항을 충족시켜야한다고 원합니다. 코드는 다음과 같습니다

이 필드

function notEmpty(elem, helperMsg) { 
    if (elem.value.length >= 2) { 
     return true; 
     alert(helperMsg); 
     elem.focus(); 
     return false; 
    } 
    return true; 
} 

형태의 시작에 어떤 값이 있는지 확인합니다 :

<form method="get" onsubmit="notEmpty();" action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl">

제출 버튼 :

<input type="submit" name='Submit' value="Send" onClick='notEmpty();'>

우리 문제에 대한 통찰력이 가장 환영합니다!

Answer 1

이 실패하는 몇 가지 이유가 있습니다.

notEmpty을 호출 할 때 인수를 전달하지 않으므로 처음으로 발생하는 것은 elem이 undefined입니다. 속성 (value)에 액세스하려고하면 예외가 발생하고 기능이 중지됩니다.

상단에서 봅시다.

먼저 우리는보다 최신의 방법을 사용하여 이벤트 처리기를 적용 할 것입니다.

처리 할 양식을 식별 할 수있는 방법을 제공하십시오. id 속성은 (그러나 나는 더 의미있는 이름을 사용하는) 좋은 일반 선택 :

<form id="myForm" 
     method="get" 
     action="http://www.censoredgaming.co.uk/cgi-bin/mailer.pl"> 

다음으로, DOM에서 양식에 대한 참조를 가져과에 이벤트 리스너를 추가

document.getElementById('myForm').addEventListener('submit', notEmpty); 

이후에 양식을 DOM에 추가해야합니다. 이를 달성하는 가장 쉬운 방법은 </form> (</body>이 인기있는 장소 인 직후)에 <script>을 배치하는 것입니다. DOM이 준비되었거나 문서가로드 될 때 발생하는 이벤트 핸들러를 사용할 수도 있습니다.

Internet Explorer의 이전 버전은 addEventListerner을 지원하지 않으며 지원하려면 the MDN documentation which has a compatibility routine을 참조하십시오.

다음으로 notEmpty 함수를 업데이트하십시오. 이벤트 처리기이기 때문에 하나의 인수, 즉 이벤트 객체를 가져옵니다. 또한 바인딩되는 요소 (양식)의 컨텍스트에서 호출됩니다.

function notEmpty(event) { 
    var aForm = this; 
} 

일부 요소의 길이가 일정한 지 확인하고 싶지만 해당 요소에 대한 서명이 없는지 확인하고 싶습니다.의이 예제와 함께 노력합시다 :

이

<label> Some data <input name="example"></label> 

양식의 요소 컬렉션을 통해 요소를 참조 할 수 있습니다 : 당신이하지 않으면

function notEmpty(event) { 
    var aForm = this; 
    var input = aForm.elements.example; 
    if (input.length >= 2) { 

    } else { 

    } 
} 

:

function notEmpty(event) { 
    var aForm = this; 
    var input = aForm.elements.example; 
} 

지금 당신은 당신의 테스트를 추가 할 수 있습니다 양식을 제출하려면 다음 이벤트의 기본 작업을 방지하십시오.

function notEmpty(event) { 
    var aForm = this; 
    var input = aForm.elements.example; 
    if (input.length >= 2) { 
     // At least two characters, all is well 
    } else { 
     alert("An error"); 
     input.focus(); 
     event.preventDefault(); 
    } 
} 

Answer 2

귀하의 return true이 제거되어야한다 첫째 : P