使用 jQuery.Validate(） 忽略整个表单上的必需
Ignoring required's on an entire form using jQuery.Validate()
我试图使用 jQuery 验证忽略整个表单上所需的验证，但似乎无法让它工作，这是在使用 @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]
[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将属性名称作为输入的名称，并在值类型中默认添加必需，我不知道您的视图模型，也许您有一个在这种情况下不需要的值类型字段使其可为空的解析
感谢Stephen Muecke为我指出了正确的方向，我终于提出了一个完全动态的解决方案，它应该适用于每个字段，而不需要单独的页面/部分或模型。
为此，首先在您加载页面/部分运行此脚本以将一个名为isRequired的类添加到所有必需的元素中
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
- jQuery表单验证validate(）验证后提交不起作用
- 正在尝试使用.submit在表单提交上激发jquery validate
- 在jquery.validate(）验证表单之前触发函数
- 在多个动态添加的表单上初始化 jQuery validate(） 函数
- jquery.validate 插件在 AJAX 成功回调中访问表单
- 您是否必须在表单元素上使用 JQuery 验证插件 validate(）
- 使用 jQuery.Validate(） 忽略整个表单上的必需
- 如何包含 jquery.validate.js 文件(在本地目录中）并在表单验证中使用它
- 将动态创建的表单元素添加到 jquery.validate
- 使用 jquery.validate.js 插件进行条件表单验证
- 如何使用jQuery Validate正确验证放置在多个选项卡上的Twitter的Bootstrap表单
- Jquery.validate - 一个页面 - 多个表单
- Dojo表单.如何显示关于不正确填写的表单元素的错误，如dijit方法validate(）所做的
- jquery validate和ajax post表单的验证表单空白文本区域出错
- 提交一个Contact表单并使用validate.js
- JQuery Validate:验证隐藏表单(可能的bug)
- jQuery Validate不验证表单提交
- jQuery Validate插件未验证'这不是表单输入
- jquery validate . resetform()不清除表单，验证消息触发手动重置
