WebAPI Document - GUIソリューション - プラクティス#8

入力チェックを追加

前回設置した経路表示パーツでは駅名を入力せずに経路探索を行うとエラーになっていました。
今回のプラクティスでは経路探索を行う前の入力チェックを追加して、エラーを回避するようにします。

  1. 入力チェック用の関数を用意します。 
/*
 * 探索前に入力チェックを行う
 */
function checkData(){
  // メッセージの初期化
  var errorMessage="";
  if(!dateTimeApp.checkDate()){
    // 日付入力パーツのチェック
    errorMessage +="\n日付を正しく入力してください。";
  }
  if(stationApp1.getStation() == ""){
    // 駅名入力パーツの空チェック
    errorMessage +="\n出発地は必須です。";
  }
  if(stationApp2.getStation() == ""){
    // 駅名入力パーツの空チェック
    errorMessage +="\n目的地は必須です。";
  }else{
    if(stationApp1.getStation() == stationApp2.getStation()){
      // 駅名同一チェック
      errorMessage +="\n出発地と目的地が同一です。";
    }
  }
  if(errorMessage != ""){
    alert("下記の項目を確認してください。"+errorMessage);
    return false;
  }else{
    return true;
  }
}
  1. 指定した日付が間違っていないかを確認します。
  2. 出発地が空になっていないかを確認します。
  3. 目的地が空になっていないかを確認します。
  4. 出発地と目的地が同じでないかを確認します。
  1. 探索用のスクリプトに入力チェックを追加します。 
  //入力チェック後に動作
  if(checkData()){
    ・・・
  }

サンプル

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <title>
    Webサービスサンプル
    </title>
    <!-- ヘッダ部分 -->
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiDateTime.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiStation.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCondition.css">
    <link class="css" rel="stylesheet" type="text/css" href="expCss/expGuiCourse.css">
    <script type="text/javascript" src="expGuiDateTime.js?key=rnwfzKX4rvNVZYat"></script>
    <script type="text/javascript" src="expGuiStation.js?key=rnwfzKX4rvNVZYat"></script>
    <script type="text/javascript" src="expGuiCondition.js?key=rnwfzKX4rvNVZYat"></script>
    <script type="text/javascript" src="expGuiCourse.js?key=rnwfzKX4rvNVZYat"></script>
    <!-- 初期化スクリプト部分 -->
    <script type="text/javascript">
      <!--
var dateTimeApp;// 日付入力パーツ
var stationApp1;// 駅名入力パーツ#1
var stationApp2;// 駅名入力パーツ#2
var conditonApp;// 探索条件パーツ
var resultApp;// 経路表示パーツ
/*
 * パーツを初期化
 */
function init(){
  // 日付入力パーツ初期化
  dateTimeApp = new expGuiDateTime(document.getElementById("dateTime"));
  dateTimeApp.dispDateTime();
  // 駅名入力パーツ#1初期化
  stationApp1 = new expGuiStation(document.getElementById("station1"));
  stationApp1.dispStation();
  // 駅名入力パーツ#2初期化
  stationApp2 = new expGuiStation(document.getElementById("station2"));
  stationApp2.dispStation();
  // 探索条件パーツ初期化
  conditonApp = new expGuiCondition(document.getElementById("condition"));
  conditonApp.dispCondition();
  // 経路表示パーツ初期化
  resultApp = new expGuiCourse(document.getElementById("result"));
}

function search(){
  //入力チェック後に動作
  if(checkData()){
    var searchWord = "";
    // 発着地リストを作成
    searchWord +="viaList="+ stationApp1.getStation() +":"+ stationApp2.getStation();
    // 探索種別
    searchWord += '&searchType='+ dateTimeApp.getSearchType();
    // 日時設定
    searchWord += '&date='+ dateTimeApp.getDate();
    if(dateTimeApp.getSearchType()==dateTimeApp.SEARCHTYPE_DEPARTURE || dateTimeApp.getSearchType()==dateTimeApp.SEARCHTYPE_ARRIVAL){
      searchWord += '&time='+ dateTimeApp.getTime();
    }
    // ソート
    searchWord += '&sort='+ conditonApp.getSortType();
    // 探索結果数
    searchWord += '&answerCount='+ conditonApp.getAnswerCount();
    // 探索条件
    searchWord += '&conditionDetail='+ conditonApp.getConditionDetail();
    // 探索を実行
    resultApp.search(searchWord,conditonApp.getPriceType());
  }
}

/*
 * 探索前に入力チェックを行う
 */
function checkData(){
  // メッセージの初期化
  var errorMessage="";
  if(!dateTimeApp.checkDate()){
    // 日付入力パーツのチェック
    errorMessage +="\n日付を正しく入力してください。";
  }
  if(stationApp1.getStation() == ""){
    // 駅名入力パーツの空チェック
    errorMessage +="\n出発地は必須です。";
  }
  if(stationApp2.getStation() == ""){
    // 駅名入力パーツの空チェック
    errorMessage +="\n目的地は必須です。";
  }else{
    if(stationApp1.getStation() == stationApp2.getStation()){
      // 駅名同一チェック
      errorMessage +="\n出発地と目的地が同一です。";
    }
  }
  if(errorMessage != ""){
    alert("下記の項目を確認してください。"+errorMessage);
    return false;
  }else{
    return true;
  }
}
// -->
    </script>
  </head>
  <body onLoad="Javascript:init();">
    <!-- パーツ表示部分 -->
    <div id="dateTime"></div>
    出発地
    <div id="station1" style="width:100%;"></div>
    目的地
    <div id="station2" style="width:100%;"></div>
    <div id="condition"></div>
    <a href="Javascript:search();">このリンクをクリックすることで経路が表示されます</a><br>
    <div id="result"></div>
  </body>
</html>

次のプラクティスへ

Indexへ戻る
Val Laboratory