Не удается получить мой «код», подтвержденный JavaScript

Question

Хорошо, поэтому для моего школьного проекта мне нужно создать страницу с формой для ввода кода конкурса в определенном формате, использовать javascript для его проверки и отображения " извините "сообщение. Я считаю, что у меня все правильно, но я не понимаю, как я здесь прошу о помощи. Кажется, что каждый раз, когда я пытаюсь отправить код, страница просто обновляется, и мой JSFiddle-тест возвращает неуловимую ошибку. Любая помощь будет оценена по достоинству. Код, который я использую ниже двух 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.') 
    } 
});