###実現したいこと
メールアドレスの入力フォーム実装に取り組んでいて、値の検証方法として下記3つを考えています。これらを実現したいです。
➀捨てアドを検証
➁既存を検証
➂文字を検証
###発生している問題
上の➀は外部APIによる検証なのですが、検証結果(true
かfalse
)の取得に時間がかかってしまいます。
なので「true
ならクラスを外す」などの条件分岐ができません。
後述のように$.when
も$.Deferred
も使いどころがわからず苦戦しています。
もし正しい使い方や他の解決策があればご指導いただきたいと思います。
###該当のソースコード
現状の流れは下記です。
➀➁➂をまとめて検証するvalidMailTotal()
という関数を用意し、それがtrue
を返せば#mailBox
から.dame
を外す。という処理にしています。
<input type="text" id="mailBox" class="dame"><br> <script> // メールアドレスの入力 $( document ).on( 'input', '#mailBox', function() { const inputVal = $( this ).val(); // 入力値を取得 const allow = validMailTotal( inputVal ); // 入力値がOKならtrue console.log( allow ); if( allow ){ $( this ).removeClass('dame'); } else{ $( this ).addClass('dame'); } });
下記がまとめて検証する関数validMailTotal()
で、➀➁➂が終わってから検証結果を返すように$.when
を使ってみました。しかしこれがundefined
を返すのです。
// メールアドレスを検証 function validMailTotal( inputVal ){ let sute, exist, match; $.when( // ➀捨てアドを検証 sute = validMailSute( inputVal ), // ➁既存を検証 exist = validMailExist( inputVal ), // ➂文字を検証 match = validMailMatch( inputVal ) ) .done(function(){ // 全ての検証がOKならtrueを返す if( sute && exist && match ){ return true; } }); }
そして➀➁➂の検証がそれぞれ下記で、検証結果がOKならtrue
を返すというものです。(➁は実際にはAjaxでDBを探しますが、順番を測る目的だけなのでsetTimeout
にしています。)
// ➀捨てアドを検証 function validMailSute( inputVal ){ const xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", "https://www.validator.pizza/email/"+inputVal+"", false ); xmlHttp.send(); const pizza = JSON.parse(xmlHttp.responseText); const disposable = pizza.disposable; // ダメなときtrueが返ってややこしいので次で逆にしとく const sute = disposable==true ? false : true; return sute; } // ➁既存を検証 function validMailExist( inputVal ){ setTimeout(function(){ // 実際にはAjaxでDBを探します const exist = true; return exist; },2000); } // ➂文字を検証 funtion validMailMatch( inputVal ){ const match = inputVal.match(/^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z\-0-9]+.)+[a-zA-Z]{2,}))$/); return match; }
###ためしたこと
先述のようにまとめて検証する関数validMailTotal()
がundefined
を返すので他に方法はないかと思い、$.when
でなく$.Deferred
などを試してみました。しかし外部APIについて$.Deferred
を書く場所がわかりません。
どうすれば➀➁➂の検証を無事にできるでしょうか。
回答2件
あなたの回答
tips
プレビュー