[英]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.