无法通过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.') 
    } 
});