我在同一个php页面中有3个表单。每个表单包含相同的输入字段（具有不同的名称）。提交后每个表单的操作也不同。一个用于在db中插入新记录，另一个用于更新相同记录，最后一个用于删除该记录。
我想在一个jquery脚本中验证所有这些。所以，我这样做了：
形式：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- jQuery Validation Plugin
hosted by Google API -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- jQuery Library -->
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#showadd').click(function() {
$('.add').toggle("slide");
$('.update').hide();
$('.delete').hide();
});
$('#showupdate').click(function() {
$('.update').toggle("slide");
$('.add').hide();
$('.delete').hide();
});
$('#showdelete').click(function() {
$('.delete').toggle("slide");
$('.update').hide();
$('.add').hide();
});
$('input.text').keyup(function () {
$('input.link').prop('disabled', this.value.length === 0 ? false : true);
$('input.evidence').prop('disabled', this.value.length === 0 ? false : true);
});
$('input.link').keyup(function () {
$('input.text').prop('disabled', this.value.length === 0 ? false : true);
$('input.evidence').prop('disabled', this.value.length === 0 ? false : true);
});
$(".evidence").on("change", function(){
if($.trim($(".evidence").val())){
$('.link').attr("disabled", "disabled");
$('.text').attr("disabled", "disabled");
}else{$('.link').removeAttr('disabled');$('.text').removeAttr('disabled');}
});
});
</script>
</head>
<body>
<div id="showadd">Add Evidence</div>
<br>
<div class="add" style="display:none">
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
<div class="formLayout">
<div class="required">
<label>Evidence Category</label>
<select name="category">
<option value="none"></option>
<option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
<option value="Governance and Administration">Governance and Administration</option>
<option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
<option value="Learning and Teaching">Learning and Teaching</option>
<option value="Student Administration and Support Services">Student Administration and Support Services</option>
<option value="Learning Resources">Learning Resources</option>
<option value="Facilities and Equipment">Facilities and Equipment</option>
<option value="Financial Planning and Management">Financial Planning and Management</option>
<option value="Employment Processes">Employment Processes</option>
<option value="Research">Research</option>
<option value="Relationships with the Community">Relationships with the Community</option>
</select>
</div>
<br>
<div class="required">
<label>Evidence Title</label>
<input type="text" name="title"/>
</div>
<br>
<div class="required">
<label>Evidence File</label>
<input type="file" name="evidence" id="evidenceToUpload" class="evidence">
<label id="evidenceSize"></label>
</div>
<br>
<div class="required">
<label>Evidence Link</label>
<input type="text" name="eviLink" class="link"/>
</div>
<br>
<div class="required">
<label>Physical Evidence</label>
<input type="text" name="eviText" class="text"/>
</div>
<br>
<input type="submit" name="add" value="Add" class="styled_button"/>
</div>
</form>
<br>
</div>
<div id="showupdate">Update Evidence</div>
<br>
<div class="update" style="display:none">
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
<div class="formLayout">
<div class="required">
<label>Evidence Category</label>
<select name="category_update">
<option value="none"></option>
<option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
<option value="Governance and Administration">Governance and Administration</option>
<option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
<option value="Learning and Teaching">Learning and Teaching</option>
<option value="Student Administration and Support Services">Student Administration and Support Services</option>
<option value="Learning Resources">Learning Resources</option>
<option value="Facilities and Equipment">Facilities and Equipment</option>
<option value="Financial Planning and Management">Financial Planning and Management</option>
<option value="Employment Processes">Employment Processes</option>
<option value="Research">Research</option>
<option value="Relationships with the Community">Relationships with the Community</option>
</select>
</div>
<br>
<div class="required">
<label>Evidence Title</label>
<input type="text" name="title_update"/>
</div>
<br>
<div class="required">
<label>Evidence File</label>
<input type="file" name="evidence_update" id="evidenceToUpload_update" class="evidence">
<label id="evidenceSizeUpdate"></label>
</div>
<br>
<div class="required">
<label>Evidence Link</label>
<input type="text" name="eviLink_update" class="link"/>
</div>
<br>
<div class="required">
<label>Physical Evidence</label>
<input type="text" name="eviText_update" class="text"/>
</div>
<br>
<input type="submit" name="update" value="Update" class="styled_button"/>
</div>
</form>
<br>
</div>
<div id="showdelete">Delete Evidence</div>
<br>
<div class="delete" style="display:none">
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" id="inst-form" novalidate>
<div class="formLayout">
<div class="required">
<label>Evidence Category</label>
<select name="category_delete">
<option value="none"></option>
<option value="Mission Goals and Objectives">Mission, Goals and Objectives</option>
<option value="Governance and Administration">Governance and Administration</option>
<option value="Management of Quality Assurance and Improvement">Management of Quality Assurance and Improvement</option>
<option value="Learning and Teaching">Learning and Teaching</option>
<option value="Student Administration and Support Services">Student Administration and Support Services</option>
<option value="Learning Resources">Learning Resources</option>
<option value="Facilities and Equipment">Facilities and Equipment</option>
<option value="Financial Planning and Management">Financial Planning and Management</option>
<option value="Employment Processes">Employment Processes</option>
<option value="Research">Research</option>
<option value="Relationships with the Community">Relationships with the Community</option>
</select>
</div>
<br>
<input type="submit" name="delete" value="Delete" class="styled_button"/>
</div>
</form>
<br>
<br>
</div>
</body>
</html>
Jquery的：
// JavaScript Document
//jQuery Form Validation code
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
// Setup form validation on the #register-form element
$("#inst-form").validate({
errorElement: 'div',
// Specify the validation rules
rules: {
category:
{
checkEviCategory: true,
},
title:
{
required: true,
},
evidence:
{
accept: "pdf",
required: true,
checkEvidence: true,
},
eviLink:{
required: true,
},
eviText:
{
required: true,
},
category_update:
{
checkEviCategory: true,
},
title_update:
{
required: true,
},
evidence_update:
{
accept: "pdf",
required: true,
checkEvidenceUpdate: true,
},
eviLink_update:{
required: true,
},
eviText_update:
{
required: true,
},
},
// Specify the validation error messages
messages: {
title:
{
required: "Enter evidence title",
},
EviLink:
{
required: "Enter evidence link",
},
EviText:
{
required: "Enter the physical location of the evidence",
},
evidence:{
accept: "Upload pdf document only",
required: "Upload ..",
},
title_update:
{
required: "Enter evidence title",
},
eviLink_update:
{
required: "Enter evidence link",
},
eviText_update:
{
required: "Enter the physical location of the evidence",
},
evidence_update:{
accept: "upload pdf document only",
required: "Upload ..",
},
},
submitHandler: function(form) {
form.submit();
}
});
jQuery.validator.addMethod('checkEviCategory', function (value) {
return (value != 'none');
}, "Select evidence category");
jQuery.validator.addMethod('checkEvidence', function () {
if(!$("#evidenceToUpload").val() == '')
{
var iSize = ($("#evidenceToUpload")[0].files[0].size / 1024);
if (iSize / 1024 > 1)
{
if (((iSize / 1024) / 1024) > 1)
{
iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
$("#evidenceSize").html( iSize + " GB");
}
else
{
iSize = (Math.round((iSize / 1024) * 100) / 100)
$("#evidenceSize").html( iSize + " MB");
}
}
else
{
iSize = (Math.round(iSize * 100) / 100)
$("#evidenceSize").html( iSize + " KB");
}
return (iSize<4294967295); // 4GB is 4,294,967,295 bytes
}
return true;
}, "File exceeded 4GB");
jQuery.validator.addMethod('checkEvidenceUpdate', function () {
if(!$("#evidenceToUpload_update").val() == '')
{
var iSize = ($("#evidenceToUpload_update")[0].files[0].size / 1024);
if (iSize / 1024 > 1)
{
if (((iSize / 1024) / 1024) > 1)
{
iSize = (Math.round(((iSize / 1024) / 1024) * 100) / 100);
$("#evidenceSizeUpdate").html( iSize + " GB");
}
else
{
iSize = (Math.round((iSize / 1024) * 100) / 100)
$("#evidenceSizeUpdate").html( iSize + " MB");
}
}
else
{
iSize = (Math.round(iSize * 100) / 100)
$("#evidenceSizeUpdate").html( iSize + " KB");
}
return (iSize<4294967295); // 4GB is 4,294,967,295 bytes
}
return true;
}, "File exceeded 4GB");
}}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);
结果：
只验证第一张表格!!
如何 修复 这是最简单的原因（最少的更改）。
另外，我是jquery的初学者，我讨厌动态分配规则和消息（我在同一个案例中找到了答案）。
答案 0 :(得分：0)
ID对于页面上的每个元素都是唯一的，将您的ID更改为唯一，然后您可以添加一个特定的类并调用它来进行验证，而不是ID。只要该类附加到所有3个表单并且验证也是如此，那么它应该可以工作。
例如
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form1" novalidate>
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form2" novalidate>
<form action="institutionLevel.php" method="post" enctype="multipart/form-data" class="inst-form" id="form3" novalidate>
这是一个如何调用表单的示例（显然不是那样的行）然后您的验证将是：
$(".inst-form").validate({
这可能会引起问题，我不太确定，因为我没有测试过它。