javascript - 如果前一个字段为空，如何防止用户输入值？

Question

我的表单中有 City 和 Building 字段。在用户提交表单之前，我需要检查所选城市中是否已经存在建筑物。楼号可以相同，因为相同号码的楼可以属于不同的城市。我想防止属于同一城市的相同建筑号码。为了实现这一点，我必须将 City+Building 连接值发送到服务器并检查该值是否存在于数据库表中。我正在尝试为这个问题找到好的解决方案。到目前为止，我为此目的使用了 focus/blur 函数。如果用户在完成输入值后单击 Building 输入字段，在模糊时我将向服务器发送 ajax 请求并返回 true 或 false。在这种情况下有点不同，在我发送请求之前我必须确保 City 字段已输入值。这是我的例子

$("#frm_building").focus(function() {
  var submitBtn = $(this).closest("form").find(":submit").prop("disabled", true), //Disable submit button on field focus.
}).blur(function() {
  var fldObj = $(this),
    frmMessage = $(this).closest("form").find(".message-submit"),
    submitBtn = $(this).closest("form").find(":submit"),
    distVal = $("");

  if (String(fldObj.val()) && String(fldObj.val()) !== String(fldObj.attr("data-current"))) {
    //if (obj.RESULT === true) { // This will be the result returned after ajax call
    if(1===1)
      fldObj.get(0).setCustomValidity("");
    } else {
      fldObj.get(0).setCustomValidity("Building already exists for that City.");
    }

    submitBtn.prop("disabled", false);

  } else {
    fldObj.get(0).setCustomValidity("");
    submitBtn.prop("disabled", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmBuilding" id="frmBuilding">
  <div class="form-group">
    <label class="control-label" for="City"><span class="label label-primary">City:</span></label>
    <select class="form-control" name="frm_city" id="frm_city" required>
      <option value="">--Choose City--</option>
      <option value="1003">New York</option>
      <option value="2341">Chicago</option>
      <option value="4343">Miami</option>
      <option value="7865">San Francisco</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="Building"><span class="label label-primary">Building:</span></label>
    <input type="text" class="form-control check-value" name="frm_building" id="frm_building" data-current="" data-fldname="building" maxlength="4" pattern="[0-9]{4}$" title="Number field requires 4 digits" placeholder="Select City first then enter Building number. Example: 1108"
      required>
  </div>
</form>

在上面的代码中，如果用户第一次输入 Building 并且 City 为空，我的代码将不会在 blur 时向服务器发送请求。然后，如果用户尝试提交表单，他们将收到消息城市字段是必需的。假设他们进入城市，建筑将与他们最初进入时保持一致。在这种情况下，on blur 永远不会被触发，请求也不会被发送。我想知道如何防止这种情况发生，如果城市字段为空，是否有办法防止用户进入大楼？此外，我还必须考虑用户想要更新记录的情况。如果他们单击编辑并填充表单，则该功能应该可以工作并填充两个字段，而不会 disabled Building。我希望这部分有意义。最初我曾尝试设置禁用属性的建筑物并在城市字段上设置更改功能。在我发现编辑情况的问题之前，它工作得很好。如果有人知道解决这种情况的好方法，请告诉我。

Answer 1

is there a way to prevent user entering Building if City field is empty?

当焦点位于建筑物上时，如果此字段为空，您可以将焦点移至城市。

$("#frm_building").on('focus', function (e) {
    if ($('#frm_city').val().length==0) {
        $('#frm_city').focus();
    }
});

$("#frm_building").on('focus', function (e) {
    if ($('#frm_city').val().length==0) {
        $('#frm_city').focus();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<form name="frmBuilding" id="frmBuilding">
    <div class="form-group">
        <label class="control-label" for="frm_city"><span class="label label-primary">City:</span></label>
        <select class="form-control" name="frm_city" id="frm_city" required>
            <option value="">--Choose City--</option>
            <option value="1003">New York</option>
            <option value="2341">Chicago</option>
            <option value="4343">Miami</option>
            <option value="7865">San Francisco</option>
        </select>
    </div>
    <div class="form-group">
        <label class="control-label" for="frm_building"><span class="label label-primary">Building:</span></label>
        <input type="text" class="form-control check-value" name="frm_building" id="frm_building" data-current=""
               data-fldname="building" maxlength="4" pattern="[0-9]{4}$" title="Number field requires 4 digits"
               placeholder="Select City first then enter Building number. Example: 1108"
               required>
    </div>
    <input type="submit" value="submit">
</form>