如何验证序列化的形式在jQuery的阿贾克斯？形式、序列化、阿贾克斯、jQuery

2023-09-10 14:49:55 作者：情殇

我创建了一个表格，我序列化，并将其发送给我的MVC操作方法............我的jQuery Ajax的脚本看起来像这样........

  $（'＃提交）。点击（函数（）{

    VAR jsonObj = $（'＃形式'）序列化（）。
    警报（jsonObj）;

    $阿贾克斯（{
        键入：POST，
        网址：../Doctor/AddDoctor，
        数据：JSON.stringify（{医生：jsonObj}），
        成功：功能（数据）{
            警报（data.Message）;
        }，
        错误：函数（jqXHR，textStatus，errorThrown）{
            警报（错误：+ errorThrown +，请重试）;
        }
    }）;
    返回false;



}）;

所以我需要在我将其发送到操作方法来验证这种形式的.....我如何能做到这一点？............ 我发现了一个code，但我真的不知道，我需要将其插入....... 这是code .......

  $（'＃MyForm的'）。验证（{//初始化插件
    规则：{
        名称： {
            要求：真实，
            //电子邮件：真实的
        }，
        收费：{
            要求：真实，
            // MINLENGTH：5
        }，
        WardId：{
            要求：真实，
            // MINLENGTH：5
        }，
        电话号码： {
            要求：真实，
            // MINLENGTH：5
        }
    }
}）;

有人能告诉我在哪里插入此，来验证我的形式..........这是我的MVC形式怎么看起来像............... ........

  @using（Html.BeginForm（AddDoctor，医生，FormMethod.Post，新{@id =形式}））
{
    @ Html.AntiForgeryToken（）

    ＆LT; DIV CLASS =形横＆GT;
        ＆LT; H4＆GT;＆LT; / H4＆GT;
        ＆LT;小时/＆GT;
        @ Html.ValidationSummary（真）

        ＆LT; DIV CLASS =形组＆GT;
            @ * @ Html.LabelFor（型号=＆GT; model.UserId，新{@class =COL-SM-2控制标签}）* @
            ＆LT;标签类=COL-SM-2控制标签＆GT;用户ID＆LT; /标签＆gt;
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.UserId，新{@class =表单控制}）
                @ Html.ValidationMessageFor（型号=＆GT; model.UserId）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            @ Html.LabelFor（型号=＆GT; model.Name，新{@class =COL-SM-2控制标签}）
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.Name，新{@class =表单控制，@name =姓名}）
                @ Html.ValidationMessageFor（型号=＆GT; model.Name）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            @ * @ Html.LabelFor（型号=＆GT; model.DoctorSpecialityId，新{@class =COL-SM-2控制标签}）* @
            ＆LT;标签类=COL-SM-2控制标签＆GT; Doctor专业人员ID＆LT; /标签＆gt;
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.DoctorSpecialityId，新{@class =表单控制}）
                @ Html.ValidationMessageFor（型号=＆GT; model.DoctorSpecialityId）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            @ Html.LabelFor（型号=＆GT; model.Charges，新{@class =COL-SM-2控制标签}）
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.Charges，新{@class =表单控制，@name =罪名}）
                @ Html.ValidationMessageFor（型号=＆GT; model.Charges）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            @ Html.LabelFor（型号=＆GT; model.WardId，新{@class =COL-SM-2控制标签}）
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.WardId，新{@class =表单控制，@name =WardId}）
                @ Html.ValidationMessageFor（型号=＆GT; model.WardId）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            @ Html.LabelFor（型号=＆GT; model.PhoneNo，新{@class =COL-SM-2控制标签}）
            ＆LT; DIV CLASS =COL-MD-10＆GT;
                @ Html.TextBoxFor（型号=＆GT; model.PhoneNo，新{@class =表单控制，@name =PHONENO}）
                @ Html.ValidationMessageFor（型号=＆GT; model.PhoneNo）
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; DIV CLASS =形组＆GT;
            ＆LT; DIV CLASS =COL-MD-偏移2 COL-MD-10＆GT;
                ＆LT;输入类型=按钮值=创建级=BTN BTN-主ID =提交/＆GT;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;

解决方案

试着改变你的点击提交处理程序，以这样的：

  $（'＃提交）。点击（函数（）{
    即preventDefault（）;

    VAR doctorForm = $（'＃形式'）;
    $ .validator.unobtrusive.parse（doctorForm）;
    doctorForm.validate（）;

    如果（doctorForm.valid（））{
        $阿贾克斯（{
            键入：POST，
            网址：@ Url.Content（〜/医生/ AddDoctor），
            数据：JSON.stringify（{医生：jsonObj}），
            成功：功能（数据）{
                警报（data.Message）;
            }，
            错误：函数（jqXHR，textStatus，errorThrown）{
                警报（错误：+ errorThrown +，请重试）;
            }
        }）;
        返回false;
    }
}）;

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........

$('#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.......

$('#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.......................

@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>

解决方案

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

上一篇：使用InternetExplorer对象是什么等待Ajax响应的正确方法？对象、正确、方法、InternetExplorer

下一篇：OAuth的，PHP，REST API和卷曲给出400错误的请求卷曲、错误、PHP、OAuth

相关推荐

精彩图集

精彩推荐

图片推荐