手動でポップアップを表示するにはどうすればいいですか？

Question

特定の入力が入力されていないか、フォームに正しく入力されていない場合に、requireポップアップを表示しようとしています。だから、これを行うために、私はこのフォーム作成しました：

<form id="login"> 
<input class="form-control require" type="email" placeholder="username" ></input> 
<button type="submit"> 
go 
</button> 
</form> 

を、私はJS関数内のロジックを置く：

$('#login').submit(function(event) 
{ 
    event.preventDefault(); 

    $(event.target).find('.require').each(function() 
    { 
    if($(this).val().length == 0) 
    { 
     this.setCustomValidity("Field Required!"); 
    } 
    else 
    { 
     this.setCustomValidity(''); 
    } 
    }); 

    console.log('ajax execution'); 
}); 

今すぐフォームが送信されたときにあなたが見ることができますどのように私は防ぎますデフォルトのイベントsubmitを作成し、各コントロールにカスタム検証エラーを割り当てます。ここで問題があるのは、フィールドが正しく評価されていない、たとえば空白の場合、ポップアップが表示されず、代わりにSubmitボタンを押すとUIにrequireポップアップが表示されることがわかります。

誰かがこれを解決するのに役立つでしょうか？あなたは何のポップアップが表示されない初めてのボタンを押すと

私は、二度目は正常に表示されますが、これは、特定のフィールドがあるたびに、とにかく初めてかを表示されます例JSFIDDLE here.

を置きます有効ではありません。

Answer 1

if($(this).val().length == 0)入力フィールドにスペースしかない場合、このコードは正しく表示されません。 uはこれを使用することを避けるために：

if($.trim($(this).val()).length == 0) 

OR

if($.trim($(this).val()) == "") 

Answer 2

あなたの問題は、イベントは一度しか発射された提出ことのようです。私はブートストラップに慣れていないので、以前はsetCustomValidity関数を見たことがありませんでしたが、おそらくボタンクリックが送信をトリガーするのを防ぐ独自のリスナーが付いていると思います。

私は、テキストボックスに何かを入力し、それにsetCustomValidityを発した場合、あなたのコードには表示されない「電子メールアドレスを入力してください」と言います。次に、「asdf@qwer.dfsgh」と入力すると、検証され、送信されます。

したがって、setCustomValidityの使用方法を理解できていないようです。私はあなたがおそらく一度それを添付して、ページが最初に読み込まれたときに、あなたがやっているように繰り返してはならないと思います。