我正在尝试创建一个表单，其中必须填写所有字段，然后才能成功提交。
所以，例如，我有一些逻辑，其中，如果发生错误，错误计数器递增，如果计数器不等于0，则表单不提交并出现警告框，告诉用户有一些空字段需要填写。 这是预期的行为。但是，当我尝试再次提交时，它会成功提交，即使有错误。
如果它更容易，请访问相关网页的临时网址：http://176.32.230.49/cecc.co.uk/add-season.php
这是我的代码：
jQuery（有问题的代码）
$("#season-submit").on('click', function(e) {
e.preventDefault();
var errorFree = 0;
//var competitionEntries = $(".text-box").val();
// if ($("#season-form").find(competitionEntries).val() == "") {
// competitionEntries.val("Illegals");
$(".text-box").each(function() {
if ($(this).val() == "" && !($(this).siblings(".error-box").is(":visible"))) {
var fieldName = $(this).siblings(".error-box").attr("id");
fieldName = fieldName.substr(0, fieldName.indexOf('-'));
fieldName = fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
//console.log($(this).siblings(".error-box").attr("id"));
if (fieldName == "Competition") {
$(this).siblings(".error-box").text("Which " + fieldName + "?").slideDown();
errorFree++;
} else {
$(this).siblings(".error-box").text("Please enter " + fieldName + "...").slideDown();
errorFree++;
}
} else if ($(this).val() != "" && $(this).siblings(".error-box").is(":visible")) {
$(this).siblings(".error-box").slideUp();
}
});
$(".dpt").each(function() {
var dateTimeValue = $(this).val();
if (dateTimeValue.length == 16 && isValid(dateTimeValue)) {
var day = parseFloat(dateTimeValue.substring(0,2));
var month = parseFloat(dateTimeValue.substring(3,5)) - 1;
var year = parseFloat(dateTimeValue.substring(6,10));
var hour = parseFloat(dateTimeValue.substring(11,13));
var minute = parseFloat(dateTimeValue.substring(14,16));
dateTimeValue = new Date(year, month, day, hour, minute);
} else {
errorFree++;
$(this).siblings(".error-box").text("Stop trying to be clever...").slideDown();
}
});
if (errorFree == 0) {
$("#season-form").submit();
} else {
console.log("Ride this way...");
alert("Not all entries are valid. Please correct them.");
}
//span2 dpt
// }
// $("#season-form").find(competitionEntries).val("Illegals");
console.log("Oh, she wasn't");
});
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>CECC | Add Season</title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/flexnav.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/foundation-datepicker.css" />
<link href='http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css' rel='stylesheet' type='text/css'>
</head>
<body class="can-add-season">
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo2.png" />
<h1>Cadmore End Cricket Club</h1>
</div>
<nav class="clearfix">
<div class="menu-button">Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">News</a>
<ul>
<li><a href="#">Social Events</a></li>
</ul>
</li>
<li class="item-with-ul">
<a href="#">Team</a>
<ul>
<li><a href="#">Players</a></li>
<li><a href="#">Fixtures/Results</a></li>
<li><a href="#">Statistics</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="row">
<div class="large-12 columns">
<h1 class="main-header text-center">Add Player</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<p class="standard-text text-center">You can add a new Cricket season on this web page. To add more fixtures to the season, click on the button below and a new fixture form will appear.</p>
</div>
</div>
<form id="season-form" enctype="multipart/form-data" action="process-season.php" method="post">
<div class="fixture">
<div class="row">
<div class="small-12 medium-2 medium-offset-5 columns end">
<label>Season
<select name="season">
<option value="option-1" selected><?php echo intval(date("Y")) . "/" . intval(date("Y")+1); ?></option>
<option value="option-2"><?php echo intval(date("Y")+1) . "/" . intval(date("Y")+2); ?></option>
<option value="option-3"><?php echo intval(date("Y")+2) . "/" . intval(date("Y")+3); ?></option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<h3 class="fixture-number">Fixture #1</h3>
</div>
</div>
<div class="row">
<div class="small-12 medium-4 columns">
<label>Date and Time
<input readonly id="date-time-box" type="text" class="span2 dpt" name="match-dt[]" value="<? echo date("d/m/Y"); ?> 12:00">
<div id="date-time-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Team
<select name="team-division[]">
<option value="team-1">1st Team</option>
<option value="team-2">2nd Team</option>
</select>
<div class="error-box"></div>
</label>
</div>
<div class="small-12 medium-3 columns">
<label>Competition
<input id="competition-input" class="text-box" name="competition[]" type="text" />
<div id="competition-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-2 columns">
<label>Home/Away
<select name="location[]">
<option value="home">Home</option>
<option value="away">Away</option>
</select>
<div class="error-box"></div>
</label>
</div>
</div>
<div class="row">
<div class="small-12 medium-6 columns">
<label>Opponents
<input id="opposition-input" class="text-box" name="opposition[]" type="text" />
<div id="opposition-error-1" class="error-box"></div>
</label>
</div>
<div class="small-12 medium-6 columns">
<label>Venue
<input id="venue-input" class="text-box" name="venue[]" type="text" />
<div id="venue-error-1" class="error-box"></div>
</label>
</div>
</div>
<div class="test"></div>
<div class="row">
<div class="small-12 columns end">
<img id="fixture-addition-logo" src="images/netvibes.png" class="float-right" />
<a id="fixture-addition-text" class="float-right">Add New Fixture</a>
</div>
</div>
</div>
<div id="submit-season-container" class="row">
<div class="small-12 medium-4 medium-offset-4 columns end">
<!-- <input type="submit" name="create-season" id="season-submit" class="button expanded radius success" value="Submit New Season" /> -->
<button id="season-submit" class="button expanded radius success">Submit New Season</button>
</div>
</div>
</form>
</main>
<footer class="clearfix">
<div class="row">
<div class="medium-4 columns">
<p class="float-left"><?php if (isset($_SESSION['username'])) {
echo $fname . " " . $lname . " <a href='logout.php'>(Sign Out)</a>";
} else {
echo "<a href='login.php'>Login</a>";
}?></p>
</div>
<div class="medium-3 columns text-center">
<p>© 2016 <a href="<?php
echo $potentialBeginning; ?>">Potential Beginning</a>
</p>
</div>
<div class="medium-5 columns">
<p class="float-right"><a href="#">Privacy Policy</a></p>
<p class="float-right"><a href="#">Terms and Conditions</a></p>
</div>
</div>
</footer>
</div>
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/what-input.min.js"></script>
<script src="js/foundation.min.js"></script>
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
<script src="js/locales/foundation-datepicker.en-GB.js"></script>
<script src="js/datepicker/foundation-datepicker.js"></script>
<script src="js/script.js"></script>
</body>
</html>
答案 0 :(得分：0)
只有当error-box不是visbile时，才会有errorFree增量。我认为这就是为什么第二次提交它不会增加errorFree以及提交表单的原因。
答案 1 :(得分：0)
问题是由这种情况引起的：
$(this).val() == "" && !($(this).siblings(".error-box").is(":visible"))
首次点击提交时，如果该值为空且隐藏了.error-box，则显示错误并增加errorFree。但是，下次点击提交.error-box已经显示，所以即使该值为空，也不会满足上述条件：
$(this).val() == "" //true
!($(this).siblings(".error-box").is(":visible")) //false
true && false === false
我建议将show/hide逻辑与empty/filled逻辑分开：
if($(this).val() === "") {
//Slide/show .error-box and increment errors
} else {
//Hide .error-box
}