如何等待"每个"完成后再进一步

Question

请不要标记已回答。这没什么帮助。

由于isValidFirstName()和isValidLastName()中的每个语句，if (isValidFistName())总是计算为FALSE，因此问题出现在submitPOCValidation((中。有人能告诉我我做错了什么吗？

var isValidFistName = function() {
var isOverallPOCValid = true,
isValidFN = true;
$("input[name='txtFirstName']").each(function() {
isValidFN = validateNotEmpty($(this).attr('id'), 'Please provide your first name', 'btnWPNext');
if (isOverallPOCValid && !isValidFN)
isOverallPOCValid = false;
}).promise().done(function() {
isValidLastName(isOverallPOCValid);
});
}
var isValidLastName = function(isOverallPOCValid) {
var isOverallPOCValid = true,
isValidLN = true;
$("input[name='txtSurname']").each(function() {
isValidLN = validateNotEmpty($(this).attr('id'), 'Please provide your last name', 'btnWPNext');
if (isOverallPOCValid && !isValidLN)
isOverallPOCValid = false;
}).promise().done(function() {
return isOverallPOCValid;
});
}
function validateNotEmpty(fieldId, message, disableSubmitButtonId) {
var isValid = true;
if ($('#' + fieldId).val().length === 0) {
$('#' + disableSubmitButtonId).prop('disabled', true);
return !isValid;
} else {
$('#' + disableSubmitButtonId).prop('disabled', false);
return isValid;
}
}
function submitPOCValidation() {
if (isValidFistName()) {
console.log('Everything is Good.');
} else
console.log('Not Good');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div name="divNewPOC" class="well">
<fieldset>
<legend>
<h2>New point of contact</h2>
</legend>
<div class="row">
<div class="col-md-6 form-group">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> <input name="txtABN" type="text" class="form-control" placeholder="ABN" maxlength="14" id="ui-id-2"> <span class="input-group-addon"><button name="btnCheckABN" type="button" class="" id="ui-id-3">CHECK</button></span>            </div>
</div>
</div>
<div class="col-md-6 form-group">
<div class="selectContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="slCompanyName" class="form-control" placeholder="Company name" id="ui-id-4"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <span class="required"></span> <input name="txtFirstName" type="text" class="form-control" placeholder="First name" minlength="2" maxlength="100" id="ui-id-5">
<span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span>
<span
class="glyphicon form-control-feedback"></span>
</div>
</div>
</div>
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <span class="required"></span> <input name="txtSurname" type="text" class="form-control" placeholder="Last name" minlength="2" maxlength="100" id="ui-id-6">
<span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span>
<span
class="glyphicon form-control-feedback"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <span class="required"></span> <input name="txtEmailAddress" type="email" class="form-control" placeholder="Email Address" maxlength="100" id="ui-id-7">
<span class="glyphicon form-control-feedback glyphicon-ok"></span>
</div>
</div>
</div>
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <span class="required"></span> <input name="txtMobileNumber" type="tel" class="form-control" placeholder="0431 XXX XXXX or 08 6876 XXXX" maxlength="10" id="ui-id-8">
<span class="glyphicon form-control-feedback glyphicon-ok"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12"> <label>Please select the role:</label> </div>
<div class="col-md-6">
<div class="checkbox"> <label><input name="chkSiteContact" type="checkbox" value="Contact for site access" id="ui-id-9">Contact for site access</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="Person who can liaise and organise access to the project site."><span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
<div class="col-md-6">
<div class="checkbox"> <label><input name="ckhAuthProjectContact" type="checkbox" value="Authorised project contact" checked="" id="ui-id-10">Authorised project contact</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="Person who can ask questions related to the project."><span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-1" style="margin-bottom: 20px"> <button type="button" name="btnDeletePOC" class="btn btn-primary btn-lg" id="ui-id-11">Delete</button> </div>
</div>
</fieldset>
</div>

Answer 1

您可以删除不必要的.promise().done(function () {...})，而将代码isValidLastName(isOverallPOCValid);移到promise之外，并返回如下所示。类似地，在isValidLastName。同样从isValidLastName中删除isOverallPOCValid声明，因为它已经来自参数。

请在下面试试。添加了Validate按钮，仅用于测试。

var isValidFistName = function() {
var isOverallPOCValid = true,
isValidFN = true;
$("input[name='txtFirstName']").each(function() {
isValidFN = validateNotEmpty($(this).attr('id'), 'Please provide your first name', 'btnWPNext');
if (isOverallPOCValid && !isValidFN)
isOverallPOCValid = false;
});
// remove promise and use return as below.
return isValidLastName(isOverallPOCValid);
}
var isValidLastName = function(isOverallPOCValid) {
// remove isOverallPOCValid declaration as it already comes from parameter.
var isValidLN = true;
$("input[name='txtSurname']").each(function() {
isValidLN = validateNotEmpty($(this).attr('id'), 'Please provide your last name', 'btnWPNext');
if (isOverallPOCValid && !isValidLN)
isOverallPOCValid = false;
});
// remove promise and use return as below.
return isOverallPOCValid;
}
function validateNotEmpty(fieldId, message, disableSubmitButtonId) {
var isValid = true;
if ($('#' + fieldId).val().length === 0) {
$('#' + disableSubmitButtonId).prop('disabled', true);
return !isValid;
} else {
$('#' + disableSubmitButtonId).prop('disabled', false);
return isValid;
}
}
function submitPOCValidation() {
if (isValidFistName()) {
console.log('Everything is Good.');
} else
console.log('Not Good');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div name="divNewPOC" class="well">
<fieldset>
<legend>
<h2>New point of contact</h2>
</legend>
<div class="row">
<div class="col-md-6 form-group">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> <input name="txtABN" type="text" class="form-control" placeholder="ABN" maxlength="14" id="ui-id-2"> <span class="input-group-addon"><button name="btnCheckABN" type="button" class="" id="ui-id-3">CHECK</button></span>            </div>
</div>
</div>
<div class="col-md-6 form-group">
<div class="selectContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
<select name="slCompanyName" class="form-control" placeholder="Company name" id="ui-id-4"></select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <span class="required"></span> <input name="txtFirstName" type="text" class="form-control" placeholder="First name" minlength="2" maxlength="100" id="ui-id-5">
<span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
</div>
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <span class="required"></span> <input name="txtSurname" type="text" class="form-control" placeholder="Last name" minlength="2" maxlength="100" id="ui-id-6">
<span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span><span class="glyphicon form-control-feedback glyphicon-ok"></span>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span> <span class="required"></span> <input name="txtEmailAddress" type="email" class="form-control" placeholder="Email Address" maxlength="100" id="ui-id-7">
<span class="glyphicon form-control-feedback glyphicon-ok"></span>
</div>
</div>
</div>
<div class="col-md-6 form-group has-feedback has-success">
<div class="inputGroupContainer">
<div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span> <span class="required"></span> <input name="txtMobileNumber" type="tel" class="form-control" placeholder="0431 XXX XXXX or 08 6876 XXXX" maxlength="10" id="ui-id-8">
<span class="glyphicon form-control-feedback glyphicon-ok"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-12"> <label>Please select the role:</label> </div>
<div class="col-md-6">
<div class="checkbox"> <label><input name="chkSiteContact" type="checkbox" value="Contact for site access" id="ui-id-9">Contact for site access</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="Person who can liaise and organise access to the project site."><span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
<div class="col-md-6">
<div class="checkbox"> <label><input name="ckhAuthProjectContact" type="checkbox" value="Authorised project contact" checked="" id="ui-id-10">Authorised project contact</label>
<a href="#" data-toggle="tooltip" data-placement="right" title="Person who can ask questions related to the project."><span class="glyphicon glyphicon-info-sign"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-1" style="margin-bottom: 20px">
<button type="button" name="btnDeletePOC" class="btn btn-primary btn-lg" id="ui-id-11">Delete</button>
<button type="button" name="btnv" class="btn btn-primary btn-lg" id="ui-id-12" onclick="submitPOCValidation()">Validate</button>
</div>
</div>
</fieldset>
</div>