简体   繁体   English

如何在jQuery Ajax中验证序列化表单?

[英]How to validate serialized forms in jQuery Ajax?

I have created a form, and i'm serializing it and sending it to my MVC Action method............My jQuery Ajax script looks like this........ 我已经创建了一个表单,并且正在对其进行序列化并将其发送到我的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;



});

So i need to validate this form before i send it to the Action method..... How can i do that?............ I have found a code but i'm not really sure where i need to insert it....... this is that code....... 因此,我需要先验证此表单,然后再将其发送到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
        }
    }
});

Can someone please show me where to insert this, to validate my form..........this is how my MVC form looks like....................... 是否有人可以告诉我在哪里插入此,为了验证我的形式..........这是我的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>

You should validate the form before sending the Ajax request so: 您应该在发送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;

    });
}

Try changing your submit click handler to this: 尝试将您的提交点击处理程序更改为:

$('#submit').click(function () {
    e.preventDefault();

    var doctorForm = $('#form');
    $.validator.unobtrusive.parse(doctorForm);
    doctorForm.validate();

    if (doctorForm.valid()) {
        $.ajax({
            type: "POST",
            url: '@Url.Content("~/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;
    }
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM