結果を表示しない形式の郵便番号フィールド

Question

都市と郵便番号に基づいてデータを表示するフォームがあります。それは正常に動作し、ユーザーは結果を受け取ることができます。

ただし、郵便番号フィールドは機能しなくなりました。理由はわかりません。私が見ることができるものに基づいて、それは2つの可能な結果を​​渡します。郵便番号が有効な場合は「0」、郵便番号がない場合は「1」。何らかの理由で、両方の値を渡しており、デフォルトでは、郵便番号が無効であるというエラーメッセージが表示されます。

問題の解決方法がわかりません。私が行ったことを投稿し、私が見たものに基づいて、なぜジッパーがデフォルトでエラーを表示するのかわかりません。私は別のフォームとそのまったく同じコードを持っており、うまく動作します。

(
 
function(){ 
 
\t var $scope, $location; 
 
\t var indexApp = angular.module('indexApp',['ui.bootstrap']); 
 
\t 
 
\t indexApp.controller('IndexController',function($scope,$http,$location,anchorSmoothScroll){ 
 
\t \t $scope.Lang = 'initVal'; 
 
\t \t $scope.ShowResults = false; 
 
\t \t $scope.ShowDesc = true; 
 
\t \t $scope.NoResults = false; 
 
\t \t $scope.currentPage = 1; 
 
\t \t $scope.maxPageNumbersToShow = 10; 
 
\t \t $scope.formModel = {}; 
 
\t \t $scope.searchMode = 0; 
 
\t \t $scope.miles = \t [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }]; 
 
\t \t $scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}]; 
 
\t \t $scope.Gender = [{'value':'Male'},{'value':'Female'}]; 
 
\t \t $scope.Languages = {}; 
 
\t \t $scope.Cities = {}; 
 
\t \t $scope.searchParam = {}; 
 
\t \t $("input").removeAttr('disabled'); 
 
\t \t 
 
\t \t $scope.searchParam.Distance = $scope.miles[0]; 
 
\t \t 
 
\t \t $scope.GetCurrentZip = function(){ 
 
\t \t \t try{ 
 
\t \t \t \t var lon, lat; 
 
\t \t \t \t // console.log('starting geoposition code.'); 
 
\t \t \t \t if("geolocation" in navigator){ 
 
\t \t \t \t \t window.navigator.geolocation.getCurrentPosition(function(pos){ 
 
\t \t \t \t \t \t lat = pos.coords.latitude.toFixed(3); 
 
\t \t \t \t \t \t lon = pos.coords.longitude.toFixed(3); 
 
\t \t \t \t \t \t // console.log(lat + ' ' + lon); 
 
\t \t \t \t \t \t $http.get("/includes/remote/ReturnCurrentZipcode.cfm?Lat=" + lat + "&Lon=" + lon) 
 
\t \t \t \t \t \t .then(function(response){ 
 
\t \t \t \t \t \t \t $scope.searchParam.Zip = response.data; 
 
\t \t \t \t \t \t }) 
 
\t \t \t \t \t }) 
 
\t \t \t \t } 
 
\t \t \t \t else{ console.log('No geolocation'); } 
 
\t \t \t } 
 
\t \t \t catch(err) { console.log(err.message); } 
 
\t \t } 
 
\t \t 
 
\t \t $scope.GetCityList = function(){ 
 
\t \t \t try{ 
 
\t \t \t \t $http.get("/includes/remote/ReturnCityList.cfm") 
 
\t \t \t \t \t .then(function(response){ 
 
\t \t \t \t \t \t $scope.Cities = response.data.Cities; 
 
\t \t \t \t \t }) 
 
\t \t \t } 
 
\t \t \t catch(err){} 
 
\t \t } 
 
\t \t 
 
\t \t $scope.GetLangList = function(){ 
 
\t \t \t try{ 
 
\t \t \t $http.get("/includes/remote/ReturnLangList.cfm") 
 
\t \t \t \t \t .then(function(response){ 
 
\t \t \t \t \t \t $scope.Languages = response.data.Languages; 
 
\t \t \t \t \t }) 
 
\t \t \t } 
 
\t \t \t catch(err){} 
 
\t \t } 
 
\t \t 
 
\t \t $scope.SearchProvider = function(searchParam){ 
 
\t \t \t try{ 
 
\t \t \t \t $scope.searchMode = 1; 
 
\t \t \t \t var queryString=''; 
 
\t \t \t \t if($scope.formModel && $scope.formModel !== searchParam){ 
 
\t \t \t \t \t $scope.resultsCount = 0; 
 
\t \t \t \t \t currentPage = 1; 
 
\t \t \t \t } 
 
\t \t \t \t if(searchParam){ 
 
\t \t \t \t \t $scope.formModel = searchParam; 
 
\t \t \t \t \t for(var param in searchParam){ 
 
\t \t \t \t \t \t if(searchParam.hasOwnProperty(param)){ 
 
\t \t \t \t \t \t \t var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim(); 
 
\t \t \t \t \t \t \t if (paramValue.length > 0) 
 
\t \t \t \t \t \t \t \t queryString += param + '=' + paramValue + '&'; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t \t console.log(queryString); 
 
\t \t \t \t queryString= '?' + queryString + 'currentpage=' + $scope.currentPage; 
 
\t \t \t \t 
 
\t \t \t \t $http.get("/includes/remote/ReturnProvidersList.cfm" + queryString) 
 
\t \t \t \t .then(function(response){ 
 
\t \t \t \t \t $scope.providers = response.data.provider; 
 
\t \t \t \t \t $scope.resultsCount = response.data.rowCount; 
 
\t \t \t \t \t if (!$scope.providers){ 
 
\t \t \t \t \t \t \t $scope.NoResults = true; 
 
\t \t \t \t \t \t \t $scope.ShowResults = false; 
 
\t \t \t \t \t \t \t $scope.ShowDesc = false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t \t $scope.NoResults = false; 
 
\t \t \t \t \t \t \t $scope.ShowResults = true; 
 
\t \t \t \t \t \t \t $scope.ShowDesc = false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t }) 
 
\t \t \t } 
 
\t \t \t catch(err){ alert('No response.: ' + err.message); } 
 
\t \t } 
 
\t \t 
 
\t \t $scope.$watchGroup(['currentPage'], function(){ 
 
\t \t \t try{ 
 
\t \t \t \t if($scope.searchMode == 1){ 
 
\t \t \t \t \t $scope.SearchProvider($scope.formModel); 
 
\t \t \t \t \t } 
 
\t \t \t } 
 
\t \t \t catch(err){} 
 
\t \t }); 
 
\t \t 
 

 
\t \t $scope.GetCityList(); 
 
\t \t $scope.GetLangList(); 
 
\t \t $scope.GetCurrentZip(); 
 
\t \t 
 
\t \t $scope.gotoElement = function (eID){ 
 
\t \t \t //http://jsfiddle.net/brettdewoody/y65G5/ 
 
\t \t \t // set the location.hash to the id of 
 
\t \t \t // the element you wish to scroll to. 
 
\t \t \t 
 
\t \t \t //$location.hash('bottom'); 
 
\t \t \t 
 
\t \t \t // call $anchorScroll() 
 
\t \t \t var browserWidth = screen.availWidth; 
 
\t \t \t if (browserWidth < 768) 
 
\t \t \t \t anchorSmoothScroll.scrollTo(eID); 
 
\t \t }; 
 
\t 
 
\t }); 
 
\t 
 
\t indexApp.service('anchorSmoothScroll', function(){ 
 
\t \t this.scrollTo = function(eID) { 
 

 
\t \t \t // This scrolling function 
 
\t \t \t // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript 
 
\t \t \t 
 
\t \t \t var startY = currentYPosition(); 
 
\t \t \t var stopY = elmYPosition(eID); 
 
\t \t \t var distance = stopY > startY ? stopY - startY : startY - stopY; 
 
\t \t \t if (distance < 100) { 
 
\t \t \t \t scrollTo(0, stopY); return; 
 
\t \t \t } 
 
\t \t \t var speed = Math.round(distance/100); 
 
\t \t \t if (speed >= 20) speed = 20; 
 
\t \t \t var step = Math.round(distance/25); 
 
\t \t \t var leapY = stopY > startY ? startY + step : startY - step; 
 
\t \t \t var timer = 0; 
 
\t \t \t if (stopY > startY) { 
 
\t \t \t \t for (var i=startY; i<stopY; i+=step) { 
 
\t \t \t \t \t setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
 
\t \t \t \t \t leapY += step; if (leapY > stopY) leapY = stopY; timer++; 
 
\t \t \t \t } return; 
 
\t \t \t } 
 
\t \t \t for (var i=startY; i>stopY; i-=step) { 
 
\t \t \t \t setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
 
\t \t \t \t leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function currentYPosition() { 
 
\t \t \t \t // Firefox, Chrome, Opera, Safari 
 
\t \t \t \t if (self.pageYOffset) return self.pageYOffset; 
 
\t \t \t \t // Internet Explorer 6 - standards mode 
 
\t \t \t \t if (document.documentElement && document.documentElement.scrollTop) 
 
\t \t \t \t \t return document.documentElement.scrollTop; 
 
\t \t \t \t // Internet Explorer 6, 7 and 8 
 
\t \t \t \t if (document.body.scrollTop) return document.body.scrollTop; 
 
\t \t \t \t return 0; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function elmYPosition(eID) { 
 
\t \t \t \t var elm = document.getElementById(eID); 
 
\t \t \t \t var y = elm.offsetTop; 
 
\t \t \t \t var node = elm; 
 
\t \t \t \t while (node.offsetParent && node.offsetParent != document.body) { 
 
\t \t \t \t \t node = node.offsetParent; 
 
\t \t \t \t \t y += node.offsetTop; 
 
\t \t \t \t } return y; 
 
\t \t \t } 
 

 
\t \t }; 
 
\t \t 
 
\t }); 
 
\t 
 
\t indexApp.directive('allowPattern',[allowPatternDirective]); 
 
\t indexApp.directive('popPopup',[describePopup]); 
 
\t indexApp.directive('pop', function pop ($tooltip, $timeout) { 
 
    var tooltip = $tooltip('pop', 'pop', 'event'); 
 
    var compile = angular.copy(tooltip.compile); 
 
    tooltip.compile = function (element, attrs) {  
 
     var first = true; 
 
     attrs.$observe('popShow', function (val) { 
 
     if (JSON.parse(!first || val || false)) { 
 
\t \t \t $timeout(function(){ 
 
\t \t \t \t element.triggerHandler('event'); 
 
\t \t \t }); 
 
\t \t \t } 
 
\t \t \t first = false; 
 
\t \t }); 
 
\t \t return compile(element, attrs); 
 
\t \t }; 
 
\t \t return tooltip; 
 
\t }); 
 
\t 
 
\t indexApp.filter('PhoneNumber', function(){ 
 
\t return function(phoneNumber){ 
 
\t \t var dash = '-'; 
 
\t \t var openParen = '('; 
 
\t \t var closeParen = ') '; 
 
\t \t if(phoneNumber){ 
 
\t \t \t var pn = phoneNumber; 
 
\t \t \t pn = [pn.slice(0, 6), dash, pn.slice(6)].join(''); 
 
\t \t \t pn = openParen + [pn.slice(0, 3), closeParen, pn.slice(3)].join(''); 
 
\t \t \t return pn; 
 
\t \t \t } 
 
\t \t return phoneNumber; 
 
\t \t } 
 
\t }); 
 
\t 
 
\t indexApp.filter('Zip', function(){ 
 
\t return function(zipcode){ 
 
\t \t var dash = '-'; 
 
\t \t if(zipcode && zipcode.length > 5){ 
 
\t \t \t var zc = zipcode; 
 
\t \t \t zc = [zc.slice(0, 5), dash, zc.slice(5)].join(''); 
 
\t \t \t return zc; 
 
\t \t \t } 
 
\t \t return zipcode; 
 
\t \t } 
 
\t }); 
 
\t 
 
\t function allowPatternDirective(){ 
 
\t \t return{ 
 
\t \t \t restrict: "A", 
 
\t \t \t compile: function(tElement, tAttrs){ 
 
\t \t \t \t return function(scope, element, attrs){ 
 
\t \t \t \t \t element.bind("keypress", function(event){ 
 
\t \t \t \t \t \t var keyCode = event.which || event.keyCode; 
 
\t \t \t \t \t \t var keyCodeChar = String.fromCharCode(keyCode); 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t if(!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))){ 
 
\t \t \t \t \t \t \t event.preventDefault(); 
 
\t \t \t \t \t \t \t return false; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t }); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
\t function describePopup(){ 
 
\t \t return { 
 
\t \t \t restrict: 'EA', 
 
\t \t \t replace: true, 
 
\t \t \t scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, 
 
\t \t \t templateUrl: 'template/popover/popover.html' 
 
\t \t \t }; 
 
\t \t } 
 
})(); 
 
(function($) { 
 
    // @todo Document this. 
 
    $.extend($,{ placeholder: { 
 
     browser_supported: function() { 
 
     return this._supported !== undefined ? 
 
      this._supported : 
 
      (this._supported = !!('placeholder' in $('<input type="text">')[0])); 
 
     }, 
 
     shim: function(opts) { 
 
     var config = { 
 
      color: '#888', 
 
      cls: 'placeholder', 
 
      selector: 'input[placeholder], textarea[placeholder]' 
 
     }; 
 
     $.extend(config,opts); 
 
     return !this.browser_supported() && $(config.selector)._placeholder_shim(config); 
 
     } 
 
    }}); 
 

 
    $.extend($.fn,{ 
 
    _placeholder_shim: function(config) { 
 
     function calcPositionCss(target) 
 
     { 
 
     var op = $(target).offsetParent().offset(); 
 
     var ot = $(target).offset(); 
 

 
     return { 
 
      top: ot.top - op.top, 
 
      left: ot.left - op.left, 
 
      width: $(target).width() 
 
     }; 
 
     } 
 
     function adjustToResizing(label) { 
 
     \t var $target = label.data('target'); 
 
     \t if(typeof $target !== "undefined") { 
 
      label.css(calcPositionCss($target)); 
 
      $(window).one("resize", function() { adjustToResizing(label); }); 
 
     } 
 
     } 
 
     return this.each(function() { 
 
     var $this = $(this); 
 

 
     if($this.is(':visible')) { 
 

 
      if($this.data('placeholder')) { 
 
      var $ol = $this.data('placeholder'); 
 
      $ol.css(calcPositionCss($this)); 
 
      return true; 
 
      } 
 

 
      var possible_line_height = {}; 
 
      if(!$this.is('textarea') && $this.css('height') != 'auto') { 
 
      possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' }; 
 
      } 
 

 
      var isBorderBox = ($this.css('box-sizing') === 'border-box'); 
 
      var isTextarea = $this.is('textarea'); 
 

 
      var ol = $('<label />') 
 
      .text($this.attr('placeholder')) 
 
      .addClass(config.cls) 
 
      .css($.extend({ 
 
       position:'absolute', 
 
       display: 'inline', 
 
       'float':'none', 
 
       overflow:'hidden', 
 
       textAlign: 'left', 
 
       color: config.color, 
 
       cursor: 'text', 
 
       paddingTop: !isTextarea && isBorderBox ? '0' : $this.css('padding-top'), 
 
       paddingRight: $this.css('padding-right'), 
 
       paddingBottom: !isTextarea && isBorderBox ? '0' : $this.css('padding-bottom'), 
 
       paddingLeft: $this.css('padding-left'), 
 
       fontSize: $this.css('font-size'), 
 
       fontFamily: $this.css('font-family'), 
 
       fontStyle: $this.css('font-style'), 
 
       fontWeight: $this.css('font-weight'), 
 
       textTransform: $this.css('text-transform'), 
 
       backgroundColor: 'transparent', 
 
       zIndex: 99, 
 
      }, possible_line_height)) 
 
      .css(calcPositionCss(this)) 
 
      .attr('for', this.id) 
 
      .data('target',$this) 
 
      .click(function(){ 
 
       if (!$(this).data('target').is(':disabled')) { 
 
        $(this).data('target').focus(); 
 
       } 
 
      }) 
 
      .insertBefore(this); 
 
      $this 
 
       .data('placeholder', ol) 
 
       .on('keydown', function() { 
 
        ol.hide(); 
 
       }) 
 
       .on('blur change', function() { 
 
        ol[$this.val().length ? 'hide' : 'show'](); 
 
       }) 
 
       .triggerHandler('blur'); 
 
      $(window).one("resize", function() { adjustToResizing(ol); }); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
})(jQuery); 
 

 
jQuery(document).add(window).bind('ready load', function() { 
 
    if (jQuery.placeholder) { 
 
    jQuery.placeholder.shim(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<cfset name_list1 = "Family Practice,General Practice,Internal Medicine,Pediatrics">  
 
<cfset name_list2 = "RMG,MG,R">  
 
<cfquery name="cityFind datasource="Wea"> 
 
\t SELECT DISTINCT city FROM providerWeb_Multiple WITH(NOLOCK) 
 
\t where ProviderSpecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">) 
 
\t and Company_ID in (<cfqueryparam value="#name_list2#" list="true" cfsqltype="cf_sql_varchar">) 
 
    order by city 
 
</cfquery> 
 

 
    <cfquery name="Languages" datasource="Webpagea"> 
 
      select DISTINCT language from Provider_Lang 
 
      order by language \t \t 
 
    </cfquery> 
 
\t \t 
 

 
<div class="panel panel-default"> 
 
\t <div class="panel-body"> 
 
\t \t <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate role="form"> 
 
\t \t \t <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option> 
 
      <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div> 
 

 
\t \t \t <div class="form-group"> 
 
      <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
 
\t \t \t \t \t <option disabled="disabled" selected="selected" value="">City</option> 
 
\t \t \t \t \t \t <option value=""></option> 
 
\t \t \t \t \t \t <cfoutput query="cityFind"> 
 
          <option value=#trim(city)#>#trim(city)#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
      <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---> 
 
      </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-6 no-right-padding paddingLanguage"> 
 
\t \t \t \t \t <div class="form-group widthLanguage"> 
 
       
 
         
 
        <select name="language" class="form-control" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
         <option value=""></option> 
 
\t \t \t \t \t <cfoutput query="Languages"> 
 
\t \t \t \t \t \t <option value=#language#>#language#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
         
 
         
 
\t \t \t \t \t <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
\t \t \t \t \t  <option ng-repeat="l in Languages">{{l.Lang}}</option> 
 
\t \t \t \t  </select>---> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-6 no-left-padding"> 
 
\t \t \t \t \t <div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender"> 
 
        <option disabled="disabled" selected="selected" value="">Gender</option> 
 
        <option value=""></option> 
 
        <option>Male</option><option>Female</option> </select></div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
      
 
      <hr class="hrDoctor" /> 
 
\t \t \t <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 
 
      
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-7 no-right-padding"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.Distance" ng-options="mile.value for mile in miles"><option selected="selected" value=" "><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select> 
 

 
\t \t \t \t \t \t \t <div class="input-group-addon">mi</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-5 no-left-padding widthZip"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group"><input id ="submit" class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
 
\t \t </form> 
 
\t </div> 
 
</div>

Answer 1

あなたはそれが送信されていても前に、CFMLの良いジップをテストする最も簡単な方法を使っているので、検証CFINPUT使用することです。また、nnnnn-nnnnは有効な米国のジッパーです。

<cfinput 
id="zip" name="zipcode" maxlength="10" 
type="number" class="form-control" 
placeholder="Zip code" 
pattern="(\d{5}([\-]\d{4})?)" 
validate="zipcode" 
message="Enter a valid zipcode" 
ng-model="searchParam.Zip" />