Question

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

的示例

$("#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 disabled填充。我希望这部分有意义。最初，我尝试设置禁用属性的建筑物，并在城市字段上设置更改功能。在我发现编辑状况问题之前，该方法一直很好。如果有人知道解决此问题的好方法，请告诉我。

Answer 1

如果“城市”字段为空，是否可以防止用户输入建筑物？

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

$("#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>

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

1 个答案: