如何解决在继续前进之前,如何等待每个完成?
请不要标记已回答。没那么有用。
由于if (isValidFistName())
和isValidFirstName()
中的每个语句,由于isValidLastName()
总是被评估为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>
解决方法
您可以删除不必要的.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。