제출 전 Ajax 유효성 검사

경험이 많은 사용자에게 기본적인 질문이 될 수있는 질문을 열어서 죄송하지만 Ajax를 배우는 것은 가파른 학습 곡선이지만 천천히 도달하고 있습니다. 클라이언트 측 유효성 검사 부분을 제외하고 완벽하게 작동하는 다음 스크립트가 있습니다. 양식 필드가 비어 있으면 양식 제출을 중지하려고합니다 . 그러나 내 유효성 검사 부분이 작동하지 않습니다 (무시되거나 건너 뜁니다)

약간의 Ajax 경험이있는 사람이 내 코드를 스캔하고 내가 어디로 잘못 가고 있는지 조언 할 수 있다면 대단히 감사하겠습니다.

 <div id="depMsg"></div>
<form name="dep-form" action="deposit/submitReference.php" id="dep-form" method="post">
        <span style="color:red">Submit Reference Nr:</span><br />
         <input type="text" name="reference" value="" /><br />
         <span id="reference-info"></span><br /> 
        <input type="submit" value="Submit" name="deposit" class="buttono" />
        </form>
             </div>

  $(function() {

         var valid
         //call validate function
         valid = validateDep()
         if(valid){
        // Get the form.
        var form = $('#dep-form');

        // Get the messages div.
        var formMessages = $('#depMsg');

        // Set up an event listener for the contact form.
        $(form).submit(function(e) {
            // Stop the browser from submitting the form.
            e.preventDefault();

            // Serialize the form data.
            var formData = $(form).serialize();

            // Submit the form using AJAX.
            $.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: formData
            })
            .done(function(response) {
        // Make sure that the formMessages div has the 'success' class.
        $(formMessages).removeClass('error').addClass('success');

        // Set the message text.
        $(formMessages).html(response); // < html();

        // Clear the form.
        $('').val('')
    })
    .fail(function(data) {
        // Make sure that the formMessages div has the 'error' class.
        $(formMessages).removeClass('success').addClass('error');

        // Set the message text.
        var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
        $(formMessages).html(messageHtml); // < html()
}
    });

        });

    });

function validateDep() {
    var valid = true;   

    if(!$("#reference").val()) {
        $("#reference-info").html("(required)");
        $("#reference").css('background-color','#FFFFDF');
        valid = false;
}
return valid;
    }

    </script>