强制停止结果填充，直到表单中的字段不为空 [英] Force Stop results to populate until a field in form is not blank

问题描述

问题:我有一个表格，可以很好地显示结果.

Problem: I have a form that displays results which works fine.

但是，当用户输入邮政编码并将里程字段留空时，它将填充警报，通知用户选择里程.当用户关闭警报框时，而不是直到满足该字段并再次单击搜索按钮时才显示结果，它将在用户有机会选择里程之前填充结果.

However, when a users enters a zip code and leaves the miles field blank, it will populate an alert notifying the user to select a miles. When the user closes the alert box, rather not showing the results until that field is satisfied and the search button is clicked once again, it will populate the results before the user has the chance to select a miles.

以下是表格:

  <div class="panel panel-default">
<div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return checkTextField()">
        <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"><strong>* OR Search by Zip code radius *</strong></div>

    <div class="row">
        <div class="col-xs-7 no-right-padding">
            <div class="form-group">
                <div class="input-group">
                    <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles" required>
                         <option 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>

以下是检查里程的js:

and the following is the js to check miles:

function checkTextField() {
    var distance = document.forms["UrgentCareSearch"]["distance"].value;
    var zip = document.forms["UrgentCareSearch"]["zip"].value;
    var empty=false;
    /*if(zip && distance || !zip && !distance){
        return true;
    }else{
        var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
        alert(alertMessage);
        return false;
    }*/
    if(zip && !distance){
        var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
        alert(alertMessage);
        return false;
    }
    else
        return true;}

我认为，按照编程的方式，它不会显示结果，因为它对我的功能有用，但仍然可以.

I thought, the way it is programmed, it will not show the results because do to my functions but it still does.

是否有一种方法可以强制在输入该字段并再次单击搜索按钮之前不显示结果?

Is there a way to force the results not to show until that field is entered and the search button is clicked again?

更新:我尝试以下操作，直到选择了英里和邮政编码后才显示结果.以下应该可以，但是在表格的开头不起作用:

UPDATE: I have tried the following to force the results not to appear until miles is selected along with zip code. The following should work but it doesn't work at the start of the form:

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

这是验证:

function checkTextField() {
    var distance = document.forms["UrgentCareSearch"]["distance"].value;
    var zip = document.forms["UrgentCareSearch"]["zip"].value;
    /*if(zip && distance || !zip && !distance){
        return true;
    }else{
        var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
        alert(alertMessage);
        return false;
    }*/
    if(zip && !distance){
        var alertMessage = "Please Select Distance When You Are Entering A Zip Code.";
        alert(alertMessage);
        return false; //Does not submit form
    }
    else
        return true;
}
var myApp = angular.module('myApp', []);

// Controller
myApp.controller('demoController', ['$scope', function($scope) {
  $scope.searchParam = {
    distance: 5 //set the value to the select box
  }
  $scope.miles = [{
    'value': '5'
  }, {
    'value': '10'
  }, {
    'value': '15'
  }, {
    'value': '20'
  }];
}]) 

// directive that converts number-string to number 
myApp.directive('convertToNumber', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$parsers.push(function(val) {
        return val != null ? parseInt(val, 10) : null;
      });
      ngModel.$formatters.push(function(val) {
        return val != null ? '' + val : null;
      });
    }
  };
});

在我输入医院名称和城市后，此方法有效.但是，在页面的开头，这意味着，当页面首次加载时，当我输入邮政编码并且没有里程时，该警报将不会出现并显示结果.我虽然在checktextField中的if语句就足够了，但它似乎不起作用.

This works after I enter a hospital name and city. However, at the start of the page, meaning, when the page first loads up, when I enter a zip code and no miles, the alert will not appear and will show the results. I though the if statement in the checktextField would suffice but it appears it does not work.

任何建议将不胜感激

推荐答案

尝试将验证移到 ng-submit 属性中:

Try moving the validation into the ng-submit attribute:

ng-submit="if(checkTextField()) SearchUrgentCare(searchParam);"

这篇关于强制停止结果填充，直到表单中的字段不为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！