Javascript 提交前的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>

提交参考编号：





$（函数（）{
var有效
//调用验证函数
valid=validateDep（）
如果（有效）{
//去拿表格。
变量形式=$（“#dep形式”）；
//获取消息div。
var formMessages=$（'depMsg'）；
//为联系人窗体设置事件侦听器。
$（表格）。提交（功能（e）{
//停止浏览器提交表单。
e、 预防默认值（）；
//序列化表单数据。
var formData=$（form）.serialize（）；
//使用AJAX提交表单。
$.ajax({
键入：“POST”，
url:$（form.attr（'action'），
数据：formData
})
.完成（功能（响应）{
//确保formMessages div具有“success”类。
$（formMessages）.removeClass（'error'）.addClass（'success'）；
//设置消息文本。
$（formMessages.html（响应）；//

您需要在提交事件处理程序中调用验证代码，在您的代码中，您正在dom就绪处理程序中运行验证，然后如果输入字段包含内容，则您正在添加事件处理程序

$(function () {
    var form = $('#dep-form');
    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();

        //do the validation here
        if (!validateDep()) {
            return;
        }

        // 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;
    }
})

$（函数（）{
变量形式=$（“#dep形式”）；
var formMessages=$（'depMsg'）；
//为联系人窗体设置事件侦听器。
$（表格）。提交（功能（e）{
//停止浏览器提交表单。
e、 预防默认值（）；
//在这里进行验证
如果（！validateDep（））{
返回；
}
//序列化表单数据。
var formData=$（form）.serialize（）；
//使用AJAX提交表单。
$.ajax({
键入：“POST”，
url:$（form.attr（'action'），
数据：formData
}).完成（功能（响应）{
//确保formMessages div具有“success”类。
$（formMessages）.removeClass（'error'）.addClass（'success'）；
//设置消息文本。
$（formMessages.html（响应）；//

我觉得我的解决方案比提供的另一个答案简单一点

如果您安装了jQuery验证库（即：jQuery.unobtrusive），则其简单如下：

$("form").on('submit', function(e) {
    e.preventDefault();
    if ($(this).isValid()) {
        $(this).submit();
    }
}); 

否则，我会将“提交”按钮改为常规按钮：

<button>Submit</button> instead of <input type='submit' />

$("button").on("click", function() {
    if ($("form input[type=text]").val() == "") {
        alert("Error!");
    } else {
        $.ajax({
            url: "/my/forms/action",
            type: "POST",
            data: $("form").serialize(),
            success: function() { }
        });
    }
});