Force Stop results to populate until a field in form is not blank

丶灬走出姿态 提交于 2019-12-13 06:48:20

问题


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.

The following is the form:

  <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>

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>

and here is the validation:

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;
      });
    }
  };
});

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.

Any suggestions would be appreciated


回答1:


Try moving the validation into the ng-submit attribute:

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


来源:https://stackoverflow.com/questions/41753935/force-stop-results-to-populate-until-a-field-in-form-is-not-blank

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!