How to prevent user entering value if previous field is empty?

Question

I have City and Building fields in my form. Before user submits the form I need to check if building already exist in selected city. Building number can be the same since building with the same number can belong to different city. I want to prevent same building numbers that belong to same city. In order to accomplish this I have to send City+Building concatenated value to the server and check if that value exist in database table. I'm trying to find good solution for this problem. So far I used focus/blur function for this purpose. If user clicks on the Building input field once finished entering value, on blur I will send an ajax request to the server and return true or false . In this case that is a little different, before I send request I have to make sure that City field has entered value. Here is example of my 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> 

In code above if user first entered Building and City is blank my code won't send request to the server on blur. Then if user tries to submit the form they will get the message City field is required. Let's say they enter City, Building will remain the same as they originally entered. In that case on blur is never triggered and request won't be sent. I'm wondering how I can prevent this to happen, is there a way to prevent user entering Building if City field is empty? Also I have to consider the case when user want to update the record. If they click edit and form gets populated that functionality should work and populate both fields without Building being disabled . I hope this part make sense. Originally I have tried setting Building with attribute disabled and setting on change function on the City field. That worked fine until I discovered the issue with edit situation. If anyone knows a good way to solve this situation please let me know.

Answer 1

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

When focus is on Buildings you can move focus on City if this 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>