javascript - 如何在 jQuery Ajax 中验证序列化表单？

Question

我已经创建了一个表单，我正在序列化它并将其发送到我的 MVC Action 方法............我的 jQuery Ajax 脚本看起来像这样......

$('#submit').click(function () {

    var jsonObj = $('#form').serialize();
    alert(jsonObj);

    $.ajax({
        type: "POST",
        url: '../Doctor/AddDoctor',
        data: JSON.stringify({ "doctor": jsonObj }),
        success: function (data) {
            alert(data.Message);    
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Error: " + errorThrown + " , Please try again");
        }
    });
    return false;



});

所以我需要在将其发送到 Action 方法之前验证此表单......我该怎么做？............ 我找到了一个代码，但我不太确定需要在哪里插入它...... 这就是代码......

$('#myform').validate({ // initialize the plugin
    rules: {
        Name: {
            required: true,
            //email: true
        },
        Charges: {
            required: true,
            //minlength: 5
        },
        WardId: {
            required: true,
            //minlength: 5
        },
        PhoneNo: {
            required: true,
            //minlength: 5
        }
    }
});

有人可以告诉我在哪里插入这个，以验证我的表单......这就是我的 MVC 表单的样子............ ........

@using (Html.BeginForm("AddDoctor", "Doctor", FormMethod.Post, new { @id = "form" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4></h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @*@Html.LabelFor(model => model.UserId, new { @class = "col-sm-2 control-label" })*@
            <label class="col-sm-2 control-label"> User ID</label>
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.UserId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.UserId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @name = "Name" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>        

        <div class="form-group">
            @*@Html.LabelFor(model => model.DoctorSpecialityId, new { @class = "col-sm-2 control-label" })*@
            <label class="col-sm-2 control-label"> Doctor Speciality ID</label>
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.DoctorSpecialityId, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.DoctorSpecialityId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Charges, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Charges, new { @class = "form-control", @name = "Charges" })
                @Html.ValidationMessageFor(model => model.Charges)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.WardId, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.WardId, new { @class = "form-control", @name = "WardId" })
                @Html.ValidationMessageFor(model => model.WardId)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PhoneNo, new { @class = "col-sm-2 control-label" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.PhoneNo, new { @class = "form-control", @name = "PhoneNo" })
                @Html.ValidationMessageFor(model => model.PhoneNo)
            </div>
        </div>        

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" value="Create" class="btn btn-primary" id="submit" />
            </div>
        </div>

Answer 1

您应该在发送 Ajax 请求之前验证表单，以便:

$(document).ready(function() { 
    $('#form').validate({ // initialize the plugin
        rules: {
            // all the rules
        }
    });

    $('#submit').click(function () {
        var $form = $('#form');

        if ($form.valid()) {

            var jsonObj = $form.serialize();
            alert(jsonObj);

            $.ajax({
                type: "POST",
                url: '../Doctor/AddDoctor',
                data: JSON.stringify({ "doctor": jsonObj }),
                success: function (data) {
                    alert(data.Message);    
                },
                error: function (jqXHR, textStatus, errorThrown) {
                     alert("Error: " + errorThrown + " , Please try again");
                }
           });
       } else {
            alert('form is not valid!');
       }
       return false;

    });
}