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

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> 

在上面的代码中，如果用户第一次输入“建筑物和城市”为空，则我的代码不会在模糊时向服务器发送请求。 然后，如果用户尝试提交表单，他们将收到消息“城市”字段为必填字段。 假设他们进入了城市，建筑物将保持与最初输入的相同。 在这种情况下，永远不会触发模糊，并且不会发送请求。 我想知道如何防止这种情况的发生，如果“城市”字段为空，是否有一种方法可以阻止用户输入建筑物？ 另外，我还必须考虑用户想要更新记录的情况。 如果他们单击“编辑”，然后填充表单，则该功能应该可以正常工作并填充两个字段，而不会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>