空白のアラートユーザーフィールドが必要です

Question

問題：特定のフィールドが空である場合、ユーザーに警告することができます。ここでは、フォームがどのように見えるかです：

ユーザーが郵便番号を入力し、検索を選択すると、私は距離を選択するようにユーザーに警告し、結果を表示しないように表示するポップアップたいと思います。ユーザーが病院名と都道府県を入力した場合は、警告が表示されないようにします。郵便番号が入力され、検索ボタンが選択されたときのみ。ここで

は形式です：

function validateForm() { 
    var x = document.forms["UrgentCareSearch"]["distance"].value; 
    if (x == "" || x=="null") { 
     alert("Please select distance"); 
     return false; 
    } 

UPDATE

私が行っている：

<div class="panel panel-default"> 
<div class="panel-body"> 
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()"> 
     <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"> 
         <option></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> 

、ここではマイルが空白の場合に警告するスクリプトです次のこととそれはまだ動作しません（検索ボタンが入力されたときとユーザーが郵便番号を入力したときに警告を表示する）ユーザーが郵便番号を入力して検索ボタンをクリックして結果を入力すると、マイルが選択されたことを知らせるアラートが表示され、ユーザーが何マイルも入力して検索を再開するまで表示されません）：

function validateForm() { 
     var x = document.forms["UrgentCareSearch"]["miles"].value; 
     var $zip = $('#zip'); 
     if ((x == "" && $zip != "") ||(x=="null" && $zip != "")) { 
      alert("Please select distance"); 
      return false; 
     } 

、これは私が必要と使用した場合です：送信されるのフォームを妨げるinput又はselect要素のそれぞれにrequiredを添加

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

Answer 1

彼らは空白のままにしている場合

<div class="panel panel-default"> 
 
<div class="panel-body"> 
 
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="return validateForm()"> 
 
     <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" required /></div> 
 

 
     <div class="form-group"> 
 
     <select class="form-control" id="city" ng-model="searchParam.City" required> 
 
     <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" required> 
 
         <option></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>

またはこの

でjqueryタッチ外観は、最初idがmyform

$(document).ready(function() 
{ 
    $('#myform').submit(function() 
    { 
     var name = $("#hospital").val(); 
     var name = $("#city").val(); 
     if(name == "" || name == " ") 
     { 
      alert("Please enter name"); 
      return false; 
     } 
     if(city == "" || city== " ") 
     { 
      alert("Please enter city"); 
      return false; 
     } 

     //Just like this and at the end when you are satisfied 
     $(this).submit(); 
    }); 
}); 

Answer 2

がにrequired属性を追加します言うことができますあなたの形態が与えることができますあなたの<select>

Answer 3

問題文でわかっていることから、検証機能では次のことができます。

function validateForm() { 
    var miles = document.forms["UrgentCareSearch"]["distance"].value; 
    var zip = document.forms["UrgentCareSearch"]["zip"].value; 
    if (zip && !miles) { 
     event.preventDefault(); // This will prevent the form submit 
     alert("Please enter the Miles."); 
     return false; // Does't submit the form (for IE) 
    } 
} 

また、関数を呼び出すときに関数を直接呼び出してください。

<form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form" onsubmit="validateForm();">