只在表单的开头有一个函数触发一次？

Question

问题：我在下面有以下表格：

var highlight = document.getElementById("miles").addEventListener("click", unHighlightMiles);

$(document).ready(function(){
		var $zip = $('#zip');
		var $city = $('#city');
		var $hospital = $('#hospital');
		var $miles = $('#miles');

		$zip.on("change",function(){
			$('#city option[value=""]').prop('selected',true).trigger('input');
			$hospital.val('').trigger('input');
		});

		$city.on("change",function(){
			$zip.val('').trigger('input');
			$miles.val('').trigger('input');
		});

		$hospital.on("change",function(){
			$zip.val('').trigger('input');
			$miles.val('').trigger('input');
		});
		
		$miles.on("change", function(){
			$('#city option[value=""]').prop('selected',true).trigger('input');
			$hospital.val('').trigger('input');
		});
	});

function checkTextField() {
		var distance = document.forms["UrgentCareSearch"]["distance"].value;
		var zip = document.forms["UrgentCareSearch"]["zip"].value;

  		if(zip && !distance){
			document.getElementById("miles").style.border = "1px solid red";
			var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
			alert(alertMessage);
			return false; //Does not submit form
		}
		else{
			if(zip && distance)
				return true;
		}
	}
	function unHighlightMiles(){
		document.getElementById("miles").style.border = "1px solid #cccccc";
	}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form">
      <div class="form-group">
        <input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" />
      </div>

      <div class="form-group">
        <select class="form-control" id="city" ng-model="searchParam.City">
          <option disabled="disabled" selected="selected" value="">City</option>
          <option value=""></option>
          <cfoutput query="HospCityFind">
            <option value=#officecity#>#officecity#</option>
          </cfoutput>
        </select>
      </div>

      <hr />
      <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

      <div class="row">
        <div class="col-xs-7 no-right-padding">
          <div class="form-group">
            <div class="input-group">
              <!---<select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"></select>--->
              <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance">
                <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
              </select>
              <div class="input-group-addon">miles</div>
            </div>
          </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
          <div class="form-group">
            <input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
          </div>
        </div>
      </div>

      <div class="form-group">
        <input class="btn btn-warning btn-block" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
      </div>
   </div>
</div>

我无法在用户输入邮政编码时显示警报。默认情况下，里程的默认值为5，这很好。但是当表单首次出现时，里程部分为空白。因此，当我输入邮政编码，而不是显示警报时，它会显示结果。

我使用以下内容：

$zip.one("change", function(){
        $miles.val('').trigger('input');
    })

工作正常，因为它只触发一次，但如果用户选择里程然后输入邮政编码，里程将消失，做上述功能。

如果用户首先决定在页面开头输入邮政编码，我将如何计算上述功能一次？