我正在使用 Jquery 插件来验证编辑表单。该验证对于创建表单工作正常，但不适用于编辑表单。
我的 HTML 是
<body>
<div class="container">
<h1 class="col-sm-offset-2">Edit Provider Details:</h1>
<br />
<form class="form-horizontal" role="form" id="EditProviderDetailsForm" method="post">
<div class="form-group">
<label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
<div class="col-sm-6">
<input type="text" class="form-control" autofocus="autofocus" placeholder="Enter the First Name" id="FirstName" data-bind="value:FirstName">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" maxlength="13">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label labelfont">EMAIL ADDRESS: </label>
<div class="col-sm-6">
<input type="text" class="form-control" data- bind="value:ContactEmail" placeholder="Enter your email address" id="EmailAddress">
</div>
<label class="col-sm-4 labelfont errorMsg" id="Err_EmailAddress">Enter the Email Address</label>
</div>
<div class="form-group">
<button type="submit" id="Update" class="btn btn-primary col-sm-1 col- sm-offset-4">Update</button>
<button type="button" id="Cancel" class="btn btn-primary col-sm- 1">Reset</button>
</div>
</form>
</div>
</body>
JavaScript 是
$(document).ready(function () {
jQuery.validator.addMethod("AcceptEmail", function (value, element) {
return this.optional(element) || /^([\w\d\-\.]+)@{1}(([\w\d\-]{1,67})| ([\w\d\-]+\.[\w\d\-]{1,67}))\.(([a-zA-Z\d]{2,4})(\.[a-zA-Z\d] {2})?)$/.test(value);
});
$("#EditProviderDetailsForm").validate({
onfocusout: function (element, event) {
this.element(element);
},
onkeyup: function (element, event) {
if (event.which === 9 && this.elementValue(element) === '') {
return;
} else if (element.name in this.submitted) {
this.element(element);
}
},
rules:
{
FirstName: { required: true, minlength: 2, maxlength: 20 },
ContactNumber: { required: true, minlength: 10, maxlength: 10 },
ContactEmail: { required: true, AcceptEmail: true }
},
messages: {
FirstName: {
required: "Please enter your first name",
minlength: "Minimum 2 characters required",
maxlength: "Maximum 20 characters allowed"
},
ContactNumber: {
required: "Please enter your Contact Number",
minlength: "Enter a 10 digit contact number",
maxlength: "Enter a 10 digit contact number"
},
ContactEmail: {
required: "Please enter your Email Address",
AcceptEmail: "Please enter a valid email ID"
}
}
});
var Provider = {
SpecializationArray: ko.observableArray(Specialities),
ProviderID: ko.observable(Edit_data.ProviderID),
FirstName: ko.observable(Edit_data.FirstName),
ContactNumber: ko.observable(Edit_data.ContactNumber),
ContactEmail: ko.observable(Edit_data.ContactEmail)
}
ko.applyBindings(Provider);
});
我的脚本正在 MVC 共享文件夹中的 _Layout 页面中加载。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="../../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../../Content/bootstrap.min.css" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script type="text/javascript" src="../../Scripts/jquery-2.1.3.min.js"> </script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.11.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-3.2.0.js"></script>
</head>
我在这里不知所措。请指导我正确的方向。控制台中没有错误。
最佳答案
不幸的是，您错过了一个基础知识 - jQuery Validate 要求每个输入都具有 name 属性。只需将所有 id 属性复制到 name 即可，您的代码即可运行。
这在 wiki 中有描述。对于图书馆。也在 documentation :
The name attribute is '''required''' for input elements, the validation plugin doesn't work without it. Usually name and id attributes should have the same value.
关于javascript - Jquery 插件不验证表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28172968/