在继续前进之前，如何等待每个完成？

问题描述

请不要标记已回答。没那么有用。

由于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>

each

在继续前进之前，如何等待每个完成？

问题描述

解决方法

相关问答