Ajaxで取得したデータを自作関数に渡す方法

Question

###実現したいこと
ユーザー名とメールアドレスの入力フォームがあり、「既存かどうか」と「入力値が正しいかどうか」を検証したいです。

###該当のソースコード

<form class="form">
  name:<input type="text" class="name" name="name"><br>
  mail:<input type="text" class="mail" name="mail">
</form>

###試したこと

入力値について、既存かどうかを検証するexistValidate()と、文字数などテキストを検証すするdefectValidateとを作りました。

Ajaxを使って既存を検証し、それがOKならばテキストの検証にいく。という流れを考えているものの、Ajaxの判定には時間がかかるために常にexist==undefinedになってしまい、条件分岐が思うように機能してくれません。

なので、existに値（trueかfalse）が入るまで、条件分岐に行かないようにしたいです。
（条件分岐は下記１０行目の部分です。）

/*
入力時に実行
*/
$(document).on('input','.form input', function(){
  const val = $(this).val();
  const name = $(this).attr('name');
  const exist = existValidate( name, val ); // ここでAjaxの返り値を格納したい
  const defect = defectValidate( name, val );

  // 以下の処理を、exist に値が格納されるまで保留したい
  if( exist || defect ){
    $(this).addClass('dame');
  }
  else if( !exist && !defect ){
    $(this).removeClass('ok');		
  }
});

/*
既存を検証（setTimeoutにしていますが、実際はAjaxで既存を検証します）
*/
function existValidate( name, val ){
  let exist;		
  // 名前検証
  if( name=='name' ){
    setTimeout(function(){ 
      exist = false;
    },2000);		
  }
  // メールアドレス検証
  else if( name=='mail' ){ 
    setTimeout(function(){
      exist = false;
    },2000);		
  }
  return exist; // このreturnを待たずにinputイベントの条件分岐が発動してしまうのが問題
}

/*
テキストを検証
*/
function defectValidate( name, val ){
  let defect;		
  // 名前検証
  if( name=='name' ){
    if( val.length > 4 && val.length < 21 ){
      if( val.match(/^[0-9a-zA-Z\_]+$/) ){
        defect = false;
      }
      else{
        defect = true;
      }
    }
    else{
      defect = true;
    }
  }
  // メールアドレス検証
  else if( name=='mail' ){
    if( val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/) ){
      defect = false;
    }
    else{
      defect = true;
    }
  }
  return defect;
}

どうすれば既存の検証とテキストの検証がいずれも機能するようにできるでしょうか？

また、正規表現の部分や処理の流れなどググって見つけたものを自分でアレンジしましたので、おかしなところがございましたらあわせてご指南頂けましたら幸いです。

宜しくお願い申し上げます。

Comments

[m.ts10806]

「Ajax 終わるのを待ってから」などでもヒントとなる情報はでそうですがそれではなにか足りませんか？
実際に調べたことそれをもって試したことを質問に追記してください

[think49]

タイトルが抽象的なので、「Ajaxで取得したデータを自作関数に渡す方法」のように質問内容を要約したタイトルに変更して頂けませんか

[x_x]

サーバーに問い合わせなくてもよい「テキストの検証」を先にしたほうがいいかと思いますが、逆にしているのはなぜでしょうか？

[Lhankor_Mhy]

「まだ回答を求めています」とのことですが、3件の回答を得てなおご不明の部分があるということかと思いますが、その部分を具体的にご提示ください。

Answer 1

「javaScript ajax 終了後」でぐぐればいっぱい出てきますけど試しました？

jQueryでajax完了後に実行開始したい処理があるときの対応

jQueryのDeferredが便利過ぎた

はじめてajaxを使うときに知りたかったこと

ajaxの処理が完了してから実行したい処理がある。

↓　これとかteratail で既に質問してる人いますし
Ajaxの返り値を受け取ってからの処理

Comments

[huyumin]

どうもどうも

Answer 2

本題は既に回答ついているので置いておいて・・・

おかしなところがございましたらあわせてご指南頂けましたら幸いです。

おかしいわけではないですが、判定処理が間延びしているのが個人的には好きじゃないです。
例えば、初期値を与えるだけでも大分削る事ができます。

  let defect = true;        
  // 名前検証
  if( name=='name' ){
    if( val.length > 4 && val.length < 21 ){
      if( val.match(/^[0-9a-zA-Z\_]+$/) ){
        defect = false;
      }
    }
  }
  // メールアドレス検証
  else if( name=='mail' ){
    if( val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/) ){
      defect = false;
    }
  }
  return defect;

さらに言うと、折角nameとmailで同じ処理を通ってきているのに、わざわざifで2分割にしているのはちょっと気持ち悪いので、

var exps = { 
  'name': /^[0-9a-zA-Z\_]+$/, 
  'mail': /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/
};
if(name=='name' && val.length <= 4 || val.length > 20) {
  return true;
}
return !(val.match(exps[name]));

等とすると気持ちいいです。(個人的な感想です。)

あと、2重否定(defectがfalse 欠陥がない)は分かりにくくなるので、validがtrueとかの方が後で見た時分かり易いと思いますよ。

Comments

[huyumin]

初期値いいですね。さっそくそうさせて頂きます。ありがとうございます。

後半の気持ちよさですが、
return !(val.match(exps[name]));
で何を返しているのかわからないことと、あとmailの方をどうするのかがわかりませんでした。

[moredeep]

exps["name"]がname用の正規表現、exps["mail"]がmail用の正規表現なので、引数nameが"name"か"mail"かになることで、
return !(val.match(exps[name]));
だけで"name"、"mail"ともに正規表現を掛けることができます。
val.matchがtrueの場合にdefectがfalseになるため、val.matchを否定(!)することで直でリターンすることができます。

ところで、まだ回答を求めていますとなっていますが、何がわかっていないのか明示しないと、回答つきにくいと思いますよ。

[huyumin]

遅くなりました。そういう仕組みでしたか。追加でご回答ありがとうございます。

Answer 3

根本的にもっと簡単な方法を使えば　とも思います。
文字数制限に関してはjquery使わなくても、html5でinputの入力文字数を制限するminlengthは指定数以内で、maxlengthは指定数以上は入力出来ないので、チェックする必要がなく、
4文字から20文字までなら

<input type="text" class="name" name="name" minlength="4" maxlength="20" placeholder="name　4〜20文字内で">

みたいにすれはばチェック不要になります。

すべてのチェックを一気に行なおうとせずに、個々のinputの下にその内容のメッセ表示する場所を用意しといて、そのinputからfocusが外れたらチェックを行うようにすると処理が格段に早くなると思いますよ。例えばnameの場合

$(".name").blur(function(){チェック等処理});

Comments

[kei344]

引用符が全角になっていますよ。

[mari.rinn]

ごめんなさい！スマホから書いてて、今気づいて直したところです。失礼しました。ついでにminlen
gthも付け足しました。

[kei344]

（‘.name’も引用符が全角）修正ありがとうございます。

[mari.rinn]

kei344様

度々ほんとにすみません！ご指摘ありがとうございます。　そっか！正しいのを入力してたら色が変わるんですね！今頃わかりました！(使い方が把握出来きれてなくてすみません)、教えてくださり感謝です！

[huyumin]

ありがとうございます。maxlength指定などしておきます。