JavaScript로 유효성이 검사 된 "코드"를 가져올 수 없습니다.

Question

내 학교 프로젝트에서 컨테스트 코드를 특정 형식으로 입력하는 양식이 필요한 페이지를 만들려면 자바 스크립트를 사용하여 유효성을 검사하고 " 미안 "메시지. 나는 모든 것이 정확하다고 믿지만 분명히 내가 여기있는 것처럼 도움을 요청하지 않는다. 코드를 제출하려고 할 때마다 페이지가 새로 고침되고 JSFiddle 테스트가 불안정한 오류를 반환하는 것처럼 보입니다. 어떤 도움을 주시면 감사하겠습니다.

<script type="text/javascript"> 
$('.code_input').on('submit', function(e) { 
    e.preventDefault(); 
    if ($('.code', this).val().match(/^[0-9]{6}\-[0-9]{6}\-[a-z]$/)) { 
     alert('Sorry, you did not win.'); 
    }else{ 
     alert('Not a valid code. Please try again.') 
    } 
}); // reference point 
</script> 

<section class="code_input"> 
    <form method="post"> 
    <input type="text" class="code" name="code" placeholder="Type Code Here" /> 
    <input id="submit" type='submit' value='Check Number'> 
    </form> 
</section> 

JSFiddle - Just the code
JSFiddle - All the code

Answer 1

https://jsfiddle.net/azhzpLct/

document.querySelector('form').addEventListener('submit', function(e) { 
    e.preventDefault(); 
    if (document.querySelector('.code').value.match(/^[0-9]{6}\-[0-9]{6}\-[a-z]$/)) { 
     alert('Sorry, you did not win.'); 
    }else{ 
     alert('Not a valid code. Please try again.') 
    } 
}); 

: 내가 사용하고있는 코드는 두 JSFiddle 링크, 내 코드 하나, 내 HTML의 모든 하나 내 JavaScripting과 같습니다