JavaScript 无法验证我的 "code"

Question

好的，所以对于我的学校项目，我需要创建一个页面，其中包含一个以特定格式输入比赛代码的表单，使用 javascript 验证它并显示 "sorry" 消息.我相信我的一切都是正确的，但显然我没有，因为我在这里寻求帮助。似乎每次我尝试提交代码时，页面都会刷新，而我的 JSFiddle 测试 returns 出现了一个奇怪的错误。任何帮助，将不胜感激。我正在使用的代码在下面有两个 JSFiddle 链接，一个只有我的代码，一个有我的所有 HTML 和我的 JavaScripting:

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

JavaScript 无法验证我的 "code"

Can't get my "code" validated by JavaScript

javascript

jquery

client-side-validation