無法通過JavaScript驗證我的「代碼」

Question

好的，因此對於我的學校項目，我需要創建一個頁面，該頁面具有以特定格式輸入比賽代碼的表單，使用javascript驗證它並顯示「抱歉「的消息。我相信我擁有一切正確的東西，但顯然我不是因爲我在這裏尋求幫助。似乎每次我嘗試提交代碼時，頁面都會刷新，並且我的JSFiddle測試會返回一個不可靠的錯誤。任何幫助，將不勝感激。我使用的代碼如下兩個的jsfiddle鏈接，一個只有我的代碼，和一個與我所有的HTML和我的JavaScript編程：

<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.') 
    } 
});