我试图通过jQuery验证来验证表单。在浏览器中检查页面时，控制台中不会显示错误。我之前使用过此插件，它只是按预期工作。出于某种原因，这不能验证任何事情。
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<link rel="stylesheet" href="css/main.css" />
<title>Person Form</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="PhpTest.php">Week 1/2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="person.html">Week 3/4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Week 5/6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Week 7/8</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="container">
<div class="jumbotron" id="personPageJumbotron">
Person Data
</div>
<section id="personTableContainer">
<form id="personForm" action="ProcessPerson.php" method="POST">
<fieldset>
<div class="form-group">
<label for="txtFirstName">First Name</label>
<input class="form-control" id="txtFirstName" aria-describedby="firstname" type="text" placeholder="Enter your first name">
</div>
<div class="form-group">
<label for="txtLastName">Last Name</label>
<input class="form-control" id="txtLastName" aria-describedby="lastname" type="text" placeholder="Enter your last name">
</div>
<div class="form-group">
<label for="txtAddress">Address</label>
<input class="form-control" id="txtAddress" aria-describedby="address" type="text" placeholder="Enter your address">
</div>
<div class="form-group">
<label for="txtCity">City</label>
<input class="form-control" id="txtCity" aria-describedby="city" type="text" placeholder="Enter your city">
</div>
<div class="form-group">
<select class="custom-select">
<option selected="">Choose your state</option>
<option value="Indiana">Indiana</option>
<option value="Kentucky">Kentucky</option>
<option value="Ohio">Ohio</option>
</select>
</div>
<div class="form-group">
<label for="txtZipCode">ZIP Code</label>
<input class="form-control" id="txtZipCode" aria-describedby="zipcode" type="text" placeholder="Enter your ZIP Code">
</div>
<div class="form-group">
<label for="dteBirthDate">Birthdate</label>
<input type="date" id="dteBirthDate" name="dteBirthDate">
</div>
<hr>
<div class="form-check">
<label>Gender</label>
<br>
<label class="form-check-label">
<input class="form-check-input" name="radGender" id="radGenderMale" checked="" type="radio"> Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" name="radGender" id="radGenderFemale" checked="" type="radio"> Female
</label>
<br>
</div>
<hr>
<div class="form-group">
<select class="custom-select">
<option selected="">Choose your shirt size</option>
<option value="xsmall">x-small</option>
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
<option value="xlarge">x-large</option>
</select>
</div>
<div class="form-check">
<label class="form-check-label">Options</label>
<br>
<label class="form-check-label">
<span>
<input class="form-check-input" value="Lunch" type="checkbox">Lunch
<br>
</span>
<span>
<input class="form-check-input" value="Dinner" type="checkbox">Dinner
<br>
</span>
<span>
<input class="form-check-input" value="Cart" type="checkbox">Cart
<br>
</span>
</label>
</div>
<hr>
<div class="form-group">
<label for="txtPhoneNumber">Phone Number</label>
<input class="form-control" id="txtPhoneNumber" aria-describedby="phonenumber" type="text" placeholder="Enter your Phone Number">
</div>
<div class="form-group">
<label for="txtEmailAddress">Email Address</label>
<input class="form-control" id="txtEmailAddress" aria-describedby="emailaddress" type="text" placeholder="Enter your Email Address">
</div>
<hr>
<div id="personPageButtonContainer">
<span>
<button type="submit" id="submitPersonDataButton" class="btn btn-primary">Submit</button>
<button type="button" id="resetFormButton" class="btn btn-primary">Clear</button>
</span>
</div>
</fieldset>
</form>
</section>
</div>
<script src="scripts/personPage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js " integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
crossorigin="anonymous "></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js " integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl "
crossorigin="anonymous "></script>
</body>
</html>
和外部javascript文件的内容。
$(document).ready(function () {
$('#personForm').validate({
rules: {
txtFirstName: {
required: true,
minlength: 2
},
txtLastName: {
required: true,
minlength: 2
},
txtAddress: {
required: true,
minlength: 2
},
txtCity: {
required: true,
minlength: 2
},
txtZipCode: {
required: true,
minlength: 5
},
txtPhoneNumber: {
required: true,
phoneUS: true
},
txtEmailAddress: {
required: true,
email: true
}
}
});
})
我确定我遗漏了一些简单而明显的东西。
答案 0 :(得分：2)
您必须在html表单中添加name属性，如下所示：
<div class="form-group">
<label for="txtFirstName">First Name</label>
<input class="form-control" id="txtFirstName" name="txtFirstName"aria-describedby="firstname" type="text" placeholder="Enter your first name">
</div>