jQuery验证不验证任何表单字段

Question

我有一个C#ASP。NET MVC应用程序，生成以下视图：

<form method="post" id="Form1" action="https://xxxxxxxxxxxx.com/cgi-pgms/xlsrdr.exe" enctype="multipart/form-data">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-12 text-left">
Submit Payroll
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-12 text-left">
<input id="achaccounts" type="hidden" value="xxxx" />
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Sheet">Sheet Name</label>
<input type="text" class="form-control" id="Sheet" aria-describedby="sheetHelp" placeholder="Sheet name">
<small id="sheetHelp" class="form-text text-muted">If Sheet Name is not supplied, the first sheet in the file is assumed.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Contact">Contact Name</label>
<input type="text" class="form-control " id="Contact" aria-describedby="contactHelp" value="First Last">
<small id="contactHelp" class="form-text text-muted">Name of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="EMail">eMail Address</label>
<input type="text" class="form-control " id="EMail" aria-describedby="emailHelp" value="[e-mail]">
<small id="emailHelp" class="form-text text-muted">eMail address of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="Phone">Contact Phone Number</label>
<input type="text" class="form-control " id="Phone" aria-describedby="phoneHelp" value="1234567890">
<small id="phoneHelp" class="form-text text-muted">Phone number of contact person in case of payroll submission problems.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="PayDate">Pay Date</label>
<input type="text" class="form-control " id="PayDate" name="PayDate" aria-describedby="paydateHelp" autocomplete="off" placeholder="From Date" value="">
<small id="paydateHelp" class="form-text text-muted">Payroll ending date for the submitted payroll (MM/DD/YYYY format).</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DolAmt">Total Dollar Amount</label>
<input type="text" class="form-control " id="DolAmt" aria-describedby="dolAmtHelp" placeholder="0.00">
<small id="dolAmtHelp" class="form-text text-muted">Total dollar amount of payroll including all contributions and loan repayments.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DepAmt">Deposit Amount</label>
<input type="text" class="form-control " id="DepAmt" aria-describedby="depAmtHelp" placeholder="0.00">
<small id="depAmtHelp" class="form-text text-muted">The sum of the Deposit Amount plus the Amount Used From Forfeitures (if any) must equal the Total Dollar Amount.</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="DepMeth">Select a Deposit Method</label>
<select class="form-control" id="DepMeth">
<option value="WIRE" selected>ACH Payment / Wire</option>
<option value="CHECK">Check</option>
<option value="ACH">ACH Collection</option>
</select>
</div>
</div>
</div>

<div class="row">
<div class="col-12">
<button class="btn btn-primary btn-sm btn-block" type="submit" id="submitButton">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script>$(document).ready(function () {
var date_PayDate = $('input[name="PayDate"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var options = {
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
};
date_PayDate.datepicker(options);
})</script>
<script>
$(document).ready(function(){
$("#Form1").validate({
// Specify validation rules
rules:
{
Contact: "required",
EMail: {
required: true,
email: true
},
Phone: {
required: true,
phoneUS: true
},
PayDate: {
required: true,
dateBR: true
},
DolAmt: {
required: true,
min: 0,
number: true
},
DepAmt: {
required: true,
min: 0,
number: true
},
},
});
});
jQuery.validator.addMethod("dateBR", function (value, element) {
return this.optional(element) || /^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$/.test(value);
}, "Enter a valid date in MM/DD/YYYY format)");
</script>
<script>
$("Form1").validate();
</script>

在我的标题中，我有以下内容：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

当我执行代码并清除联系人姓名和电话号码时，我预计验证会生成一个默认错误。不会生成任何内容。控制台不会生成javascript错误。

我需要定义每个规则显示的错误消息吗？此外，如何定义错误消息的显示位置？

谢谢。

Answer 1

您的字段都不包含name属性。

...
rules: {
Contact: "required",
EMail: { ...

您配置的标识符被设计为挂回name属性。

<input name="Contact" ....
<input name="EMail" ....