使用 jQuery.Validate() 忽略整个表单上的必需项
Ignoring required's on an entire form using jQuery.Validate()
我正在尝试使用 jQuery validate 忽略整个表单所需的验证，但似乎无法正常工作，这是在使用 @html 助手的 MVC 项目上所以我无法向要验证的元素添加名称，我也无法删除验证然后使用 jQuery 将其全部添加回去，因为并非所有字段都是必需的，我将把当前的 java 放在下面非常感谢任何帮助
$("body").on("click", ".next", function(e) {
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
form.validate({
rules: {
required: false
}
});
//check if form is valid
if (form.valid()) {
var out = form.validate({
rules: {
required: true
}
});
if (form.valid()) {
alert("valid and complete");
} else {
alert("valid but not complete");
}
} else {
showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", {
color: "#FFB347"
});
};
});
编辑
此验证器需要验证包含 300 多个字段的多个不同部分，因此使用每个单独元素的名称是不切实际的，所以我想知道是否有一种方法可以验证表单而不验证所需的输入，希望这有帮助
编辑 2
在我的模型中，我有需要的字段，上面有 [Required]，但我想在验证的第一阶段检查输入的数据是否有效，如果有效，它将把这些保存到数据库并允许页面更改，那么验证的第二步需要检查模型中设置为必需的所有元素是否都已填写，如果已return则表单已完成
这是我的模型示例
[Required]
[Display(Name = "Title")]
public int? TitleID { get; set; }
[Required]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Display(Name = "Middle Names")]
public string Middlename { get; set; }
[Required]
[Display(Name = "Surname")]
public string Surname { get; set; }
[Required]
[Display(Name = "Date of Birth")]
public DateTime? DateOfBirth { get; set; }
[Required]
[Display(Name = "Nationality")]
public string Nationality { get; set; }
[Required]
[Display(Name = "Martial Status")]
public int? StatusMaritalID { get; set; }
[Required]
[Display(Name = "NI Number")]
public string NINumber { get; set; }
[Required]
[Display(Name = "Have you been known by diffrent names?")]
public bool? IsKnownByOtherNames { get; set; }
[Required]
[Display(Name = "Phone Number")]
public string PhoneNumber { get; set; }
[Required]
[Display(Name = "Mobile Number")]
public string MobileNumber { get; set; }
[Required]
[Display(Name = "Email")]
public string Email { get; set; }
这是获取任何已填写数据的控制器示例
model.TitleID = data.TitleID;
model.FirstName = data.FirstName;
model.Middlename = data.Middlename;
model.Surname = data.Surname;
model.DateOfBirth = data.DateOfBirth;
model.Nationality = data.Nationality;
model.StatusMaritalID = data.StatusMaritalID;
model.NINumber = data.NINumber;
model.IsKnownByOtherNames = data.IsKnownByOtherNames;
model.PhoneNumber = data.PhoneNumber;
model.MobileNumber = data.MobileNumber;
model.Email = data.Email;
这里是保存控制器的例子
data.TitleID = model.TitleID;
data.FirstName = model.FirstName;
data.Middlename = model.Middlename;
data.Surname = model.Surname;
data.DateOfBirth = model.DateOfBirth;
data.Nationality = model.Nationality;
data.StatusMaritalID = model.StatusMaritalID;
data.NINumber = model.NINumber;
data.IsKnownByOtherNames = model.IsKnownByOtherNames;
data.PhoneNumber = model.PhoneNumber;
data.MobileNumber = model.MobileNumber;
data.Email = model.Email;
这是正在使用的视图
<h2>Personal Details</h2>
<div class="row-fluid">
<div class="span3">
@Html.LabelFor(x => x.TitleID)
@Html.DropDownListFor(x => x.TitleID, Model.Titles, "-- Please Select --", new { @class = "input-block-level" })
@Html.LabelFor(x => x.DateOfBirth)
@Html.TextBoxFor(x => x.DateOfBirth, "{0:dd/MM/yyyy}", new { @class = "input-block-level date-picker" })
</div>
<div class="span3">
@Html.LabelFor(x => x.FirstName)
@Html.TextBoxFor(x => x.FirstName, new { @class = "input-block-level" })
@Html.LabelFor(x => x.Nationality)
@Html.TextBoxFor(x => x.Nationality, new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.Middlename)
@Html.TextBoxFor(x => x.Middlename, new { @class = "input-block-level" })
@Html.LabelFor(x => x.StatusMaritalID)
@Html.DropDownListFor(x => x.StatusMaritalID, Model.StatusMaritals, "-- Please Select --", new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.Surname)
@Html.TextBoxFor(x => x.Surname, new { @class = "input-block-level" })
@Html.LabelFor(x => x.NINumber)
@Html.TextBoxFor(x => x.NINumber, new { @class = "input-block-level" })
</div>
</div>
<h3>Contact Details</h3>
<div class="row-fluid">
<div class="span3">
@Html.LabelFor(x => x.PhoneNumber)
@Html.TextBoxFor(x => x.PhoneNumber, new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.MobileNumber)
@Html.TextBoxFor(x => x.MobileNumber, new { @class = "input-block-level" })
</div>
<div class="span6">
@Html.LabelFor(x => x.Email)
@Html.TextBoxFor(x => x.Email, new { @class = "input-block-level", type="email" })
</div>
</div>
<div class="row-fluid">
<div class="checkbox span12" style="padding-left:0;">
@Html.CheckBox("IsKnownByOtherNames", Model.IsKnownByOtherNames != null && (bool)Model.IsKnownByOtherNames)
@Html.LabelFor(x => x.IsKnownByOtherNames)
</div>
</div>
最后这是我的整个保存脚本
$("body").on("click", ".next", function(e){
debugger;
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
form.validate({
rules: {
required: false
}
});
//check if form is valid
if (form.valid()) {
var out = form.validate({
rules: {
required: true
}
});
if (form.valid()) {
// disable the button to prevent multiple posts
btn.prop("disabled", true);
// serialise the form fields into an array
var fields = form.serializeArray();
// create a blank object to stuff the parameters into for the ajax call
var params = {};
// loop over the array and create a property for each item in array
// in the format expected by the controller action
$.each(fields, function (index, element) {
params[element.name] = element.value;
});
//loop over all checkboxes and see if they are checked or not
var checkboxes = form.find("input:checkbox")
$.each(checkboxes, function (index, element) {
params[element.name] = $(element).is(":checked");
});
// Make the ajax post call
// passing the parameters
$.post("UpdateCheck", params)
.success(function (data) {
alert("valid and complete");
// if fail alert the user of fail with error
if (data == false) {
//Create a toast message alerting of fail with reason
showSysMessage("Failed to Save. (Data Error)", { color: "#FFB347" });
// re-enables button
btn.prop("disabled", false);
} else {
btn.prop("disabled", false);
var currentpage = parseInt($(".TinyDancer").attr("data-currentpage"))
var newpage = currentpage + 1;
$.post("Page"+PageNos[newpage], {id:@Model.ID }).success(function(html){
$("#WizardStage").val(PageNos[newpage]);
$(".page[data-pageno='" + PageNos[newpage] + "']").parent().addClass("active").siblings().removeClass("active");
$(".TinyDancer").slideUp(function(){$(".TinyDancer").html(html).promise().done(function() {$(".TinyDancer").slideDown();});});
$(".TinyDancer").attr("data-currentpage", newpage);
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
});
}
}).fail(function () {
showSysMessage("Failed to Save. (Network Transport Error))", { color: "#FFB347" });
});
} else {
alert("valid but not complete");}
}else{
showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", { color: "#FFB347" });
};
});
默认情况下，MVC 将 属性 名称作为输入的名称，并在值类型中默认添加 required，我不知道你的视图模型，也许你有一个值类型字段是' 在这种情况下需要使其可为空 resolve
感谢 Stephen Muecke 为我指出了正确的方向，我终于想出了一个完全动态的解决方案，它应该适用于每个领域，而不需要单独的 pages/partials 或模型。
要执行此操作首先在您加载 page/partial 运行 此脚本时添加一个名为 isRequired 的 class 到所有必需的元素
var fields = $("form").find("input[data-val]");
$.each(fields, function (index, element) {
$(element).addClass("isRequired")
});
接下来要做的就是像这样格式化验证脚本
$("body").on("click", ".next", function(e){
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
$.each($('.isRequired'), function (index, element) {
$(element).rules('add', {
required: false // set a new rule
});
});
form.validate();
//check if form is valid
if (form.valid()) {
$.each($('.isRequired'), function (index, element) {
$(element).rules('add', {
required: true // set a new rule
});
});
form.validate();
if (form.valid()) {
alert("Form is Completed and Valid")
} else {
alert("Form is Valid but not complete");}
}else{
alert("Data Enter in some of the fields is of an Invalid Type")
};
});
我正在尝试使用 jQuery validate 忽略整个表单所需的验证，但似乎无法正常工作，这是在使用 @html 助手的 MVC 项目上所以我无法向要验证的元素添加名称，我也无法删除验证然后使用 jQuery 将其全部添加回去，因为并非所有字段都是必需的，我将把当前的 java 放在下面非常感谢任何帮助
$("body").on("click", ".next", function(e) {
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
form.validate({
rules: {
required: false
}
});
//check if form is valid
if (form.valid()) {
var out = form.validate({
rules: {
required: true
}
});
if (form.valid()) {
alert("valid and complete");
} else {
alert("valid but not complete");
}
} else {
showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", {
color: "#FFB347"
});
};
});
编辑
此验证器需要验证包含 300 多个字段的多个不同部分，因此使用每个单独元素的名称是不切实际的，所以我想知道是否有一种方法可以验证表单而不验证所需的输入，希望这有帮助
编辑 2
在我的模型中，我有需要的字段，上面有 [Required]，但我想在验证的第一阶段检查输入的数据是否有效，如果有效，它将把这些保存到数据库并允许页面更改，那么验证的第二步需要检查模型中设置为必需的所有元素是否都已填写，如果已return则表单已完成
这是我的模型示例
[Required]
[Display(Name = "Title")]
public int? TitleID { get; set; }
[Required]
[Display(Name = "First Name")]
public string FirstName { get; set; }
[Display(Name = "Middle Names")]
public string Middlename { get; set; }
[Required]
[Display(Name = "Surname")]
public string Surname { get; set; }
[Required]
[Display(Name = "Date of Birth")]
public DateTime? DateOfBirth { get; set; }
[Required]
[Display(Name = "Nationality")]
public string Nationality { get; set; }
[Required]
[Display(Name = "Martial Status")]
public int? StatusMaritalID { get; set; }
[Required]
[Display(Name = "NI Number")]
public string NINumber { get; set; }
[Required]
[Display(Name = "Have you been known by diffrent names?")]
public bool? IsKnownByOtherNames { get; set; }
[Required]
[Display(Name = "Phone Number")]
public string PhoneNumber { get; set; }
[Required]
[Display(Name = "Mobile Number")]
public string MobileNumber { get; set; }
[Required]
[Display(Name = "Email")]
public string Email { get; set; }
这是获取任何已填写数据的控制器示例
model.TitleID = data.TitleID;
model.FirstName = data.FirstName;
model.Middlename = data.Middlename;
model.Surname = data.Surname;
model.DateOfBirth = data.DateOfBirth;
model.Nationality = data.Nationality;
model.StatusMaritalID = data.StatusMaritalID;
model.NINumber = data.NINumber;
model.IsKnownByOtherNames = data.IsKnownByOtherNames;
model.PhoneNumber = data.PhoneNumber;
model.MobileNumber = data.MobileNumber;
model.Email = data.Email;
这里是保存控制器的例子
data.TitleID = model.TitleID;
data.FirstName = model.FirstName;
data.Middlename = model.Middlename;
data.Surname = model.Surname;
data.DateOfBirth = model.DateOfBirth;
data.Nationality = model.Nationality;
data.StatusMaritalID = model.StatusMaritalID;
data.NINumber = model.NINumber;
data.IsKnownByOtherNames = model.IsKnownByOtherNames;
data.PhoneNumber = model.PhoneNumber;
data.MobileNumber = model.MobileNumber;
data.Email = model.Email;
这是正在使用的视图
<h2>Personal Details</h2>
<div class="row-fluid">
<div class="span3">
@Html.LabelFor(x => x.TitleID)
@Html.DropDownListFor(x => x.TitleID, Model.Titles, "-- Please Select --", new { @class = "input-block-level" })
@Html.LabelFor(x => x.DateOfBirth)
@Html.TextBoxFor(x => x.DateOfBirth, "{0:dd/MM/yyyy}", new { @class = "input-block-level date-picker" })
</div>
<div class="span3">
@Html.LabelFor(x => x.FirstName)
@Html.TextBoxFor(x => x.FirstName, new { @class = "input-block-level" })
@Html.LabelFor(x => x.Nationality)
@Html.TextBoxFor(x => x.Nationality, new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.Middlename)
@Html.TextBoxFor(x => x.Middlename, new { @class = "input-block-level" })
@Html.LabelFor(x => x.StatusMaritalID)
@Html.DropDownListFor(x => x.StatusMaritalID, Model.StatusMaritals, "-- Please Select --", new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.Surname)
@Html.TextBoxFor(x => x.Surname, new { @class = "input-block-level" })
@Html.LabelFor(x => x.NINumber)
@Html.TextBoxFor(x => x.NINumber, new { @class = "input-block-level" })
</div>
</div>
<h3>Contact Details</h3>
<div class="row-fluid">
<div class="span3">
@Html.LabelFor(x => x.PhoneNumber)
@Html.TextBoxFor(x => x.PhoneNumber, new { @class = "input-block-level" })
</div>
<div class="span3">
@Html.LabelFor(x => x.MobileNumber)
@Html.TextBoxFor(x => x.MobileNumber, new { @class = "input-block-level" })
</div>
<div class="span6">
@Html.LabelFor(x => x.Email)
@Html.TextBoxFor(x => x.Email, new { @class = "input-block-level", type="email" })
</div>
</div>
<div class="row-fluid">
<div class="checkbox span12" style="padding-left:0;">
@Html.CheckBox("IsKnownByOtherNames", Model.IsKnownByOtherNames != null && (bool)Model.IsKnownByOtherNames)
@Html.LabelFor(x => x.IsKnownByOtherNames)
</div>
</div>
最后这是我的整个保存脚本
$("body").on("click", ".next", function(e){
debugger;
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
form.validate({
rules: {
required: false
}
});
//check if form is valid
if (form.valid()) {
var out = form.validate({
rules: {
required: true
}
});
if (form.valid()) {
// disable the button to prevent multiple posts
btn.prop("disabled", true);
// serialise the form fields into an array
var fields = form.serializeArray();
// create a blank object to stuff the parameters into for the ajax call
var params = {};
// loop over the array and create a property for each item in array
// in the format expected by the controller action
$.each(fields, function (index, element) {
params[element.name] = element.value;
});
//loop over all checkboxes and see if they are checked or not
var checkboxes = form.find("input:checkbox")
$.each(checkboxes, function (index, element) {
params[element.name] = $(element).is(":checked");
});
// Make the ajax post call
// passing the parameters
$.post("UpdateCheck", params)
.success(function (data) {
alert("valid and complete");
// if fail alert the user of fail with error
if (data == false) {
//Create a toast message alerting of fail with reason
showSysMessage("Failed to Save. (Data Error)", { color: "#FFB347" });
// re-enables button
btn.prop("disabled", false);
} else {
btn.prop("disabled", false);
var currentpage = parseInt($(".TinyDancer").attr("data-currentpage"))
var newpage = currentpage + 1;
$.post("Page"+PageNos[newpage], {id:@Model.ID }).success(function(html){
$("#WizardStage").val(PageNos[newpage]);
$(".page[data-pageno='" + PageNos[newpage] + "']").parent().addClass("active").siblings().removeClass("active");
$(".TinyDancer").slideUp(function(){$(".TinyDancer").html(html).promise().done(function() {$(".TinyDancer").slideDown();});});
$(".TinyDancer").attr("data-currentpage", newpage);
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
});
}
}).fail(function () {
showSysMessage("Failed to Save. (Network Transport Error))", { color: "#FFB347" });
});
} else {
alert("valid but not complete");}
}else{
showSysMessage("Invalid Data. Please Check the Data in the Highlighted Fields", { color: "#FFB347" });
};
});
默认情况下，MVC 将 属性 名称作为输入的名称，并在值类型中默认添加 required，我不知道你的视图模型，也许你有一个值类型字段是' 在这种情况下需要使其可为空 resolve
感谢 Stephen Muecke 为我指出了正确的方向，我终于想出了一个完全动态的解决方案，它应该适用于每个领域，而不需要单独的 pages/partials 或模型。
要执行此操作首先在您加载 page/partial 运行 此脚本时添加一个名为 isRequired 的 class 到所有必需的元素
var fields = $("form").find("input[data-val]");
$.each(fields, function (index, element) {
$(element).addClass("isRequired")
});
接下来要做的就是像这样格式化验证脚本
$("body").on("click", ".next", function(e){
e.preventDefault();
var btn = $(this);
var form = btn.closest("form");
$.each($('.isRequired'), function (index, element) {
$(element).rules('add', {
required: false // set a new rule
});
});
form.validate();
//check if form is valid
if (form.valid()) {
$.each($('.isRequired'), function (index, element) {
$(element).rules('add', {
required: true // set a new rule
});
});
form.validate();
if (form.valid()) {
alert("Form is Completed and Valid")
} else {
alert("Form is Valid but not complete");}
}else{
alert("Data Enter in some of the fields is of an Invalid Type")
};
});