如何检查表单中的字段是否已填写

How to check if a field from a form is filled?

本文关键字:字段 是否 表单 何检查 检查      更新时间:2023-09-26

所以我试图找出一种方法来空白字段,如果一个特定的字段被输入,反之亦然。

表单根据用户输入的条目定位紧急护理位置。所以我们有紧急护理机构的名称,城市,邮政编码和英里字段。

所以我想做的是,如果用户在邮政编码字段中输入邮政编码,并且如果用户之前根据给定的选择选择了一个城市,则将该城市清空,反之亦然。如果用户从城市下拉列表中选择一个城市,则邮政编码字段空白。

下面是我的代码:

$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
      </div>
      <!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
      <div class="form-group">
        <!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
            <option disabled="disabled" selected="selected" value="">City</option> </select>--->
        <SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
          <option disabled="disabled" selected="selected" value="">City</option>
          <cfoutput query="UCarecityFind">
            <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" name="distance" ng-model="searchParam.distance">
                <option selected="selected" value=" "></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</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" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
      </div>
    </form>
  </div>
</div>

.on()调用中input之后有一个代码为0x5396c的不可见字符。当我删除它,代码工作。

$('#zip').on('input', function() {
  $('#city').val("")
})
$('#city').on('input', function() {
  $('#zip').val("")
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
      </div>
      <!---<div class="form-group"><input class="form-control" id="urgentcare" name="Urgent Care Name" onblur="if(this.value === '') this.value = 'Urgent Care Name';" onfocus="if(this.value === 'Urgent Care Name') this.value = '';" type="text" value="Urgent Care Name" /></div>--->
      <div class="form-group">
        <!---<select class="form-control margin-bottom1" id="city" ng-model="searchParam.City" ng-options="City.value for City in Cities">
            <option disabled="disabled" selected="selected" value="">City</option> </select>--->
        <SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
          <option disabled="disabled" selected="selected" value="">City</option>
          <cfoutput query="UCarecityFind">
            <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" name="distance" ng-model="searchParam.distance">
                <option selected="selected" value=" "></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</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" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
      </div>
    </form>
  </div>
</div>