Jqueryフォーカスアウトは、各マウスがクリックするたびに数回実行されます

Question

jqueryでマウスを使ってテキストボックスを検証しようとしましたが、私のコードはマウスで実行されています。何度か、テキストボックスの外側をクリックすると これは私のコードです：

$(document).ready(function() { 
    $('#EmailAddress').focusout(function() { 
     var email = $.trim($('#EmailAddress').val() || ''); 
     if (email.length == 0 || !emailregx.test(email)) { 
      $(this).addClass('ChangetoYellow'); 
      $(this).after('<div class="Required">Enter valid Email.</div>'); 
      return false; 
     } else { 
      $(this).next(".Required").remove(); 
      $(this).removeClass('ChangetoYellow'); 
      return true; 
     } 
    }); 
}); 

それはdocument.readyの外にあるときに私のコードが機能していません。

これは私がクリックするたびによって実行したときに、私が得るものです：あなたが繰り返しを防ぐために1を追加する前に

Answer 1

私は、テキストボックスを検証した後、エラーのdivを挿入するいくつかのコードを実装している - 簡単な例フィドル（uは正規表現を追加し、それをテストしたい場合）については

JS

$(document).ready(function() { 
    $('#EmailAddress').focusout(function() { 
     var email = $.trim($('#EmailAddress').val() || ''); 
     if (email.length == 0 || !emailregx.test(email)) { 
     $(this).parent().find(".Required").remove(); 
     $(this).addClass('ChangetoYellow'); 
     $(this).after('<div class="Required">Enter valid Email.</div>'); 
     return false; 
     } else { 
     $(this).parent().find(".Required").remove(); 
     $(this).removeClass('ChangetoYellow'); 
     return true; 
    } 
    }); 
}); 

入力された値が有効でない場合、要素。

私はあなたの問題を解決します

$(document).ready(function() { 
 
    $('#EmailAddress').focusout(function() { 
 
     var email = $.trim($('#EmailAddress').val() || ''); 
 
     if (email.length == 0 || !emailregx.test(email)) { 
 
      var errorLabel = errorsFor(this); 
 
      $(this).addClass('ChangetoYellow'); 
 
      if(errorLabel.length > 0){ 
 
      \t $(errorLabel).show(); 
 
      } 
 
      else { 
 
\t    $(this).after('<div for='+ this.name +' class="required">Enter valid Email.</div>'); 
 
      } 
 
      return false; 
 
     } else { 
 
      $(this).next(".required").remove(); 
 
      $(this).removeClass('ChangetoYellow'); 
 
      return true; 
 
     } 
 
    }); 
 
    
 
    
 
    function errorsFor(element) { 
 
\t \t \t var name = idOrName(element); 
 
\t \t \t return $('.required').filter(function() { 
 
\t \t \t \t return $(this).attr("for") === name; 
 
\t \t \t }); 
 
\t \t }; 
 

 
    function idOrName(element) { 
 
\t return element.name ? element.name : element.id || element.name; 
 
    }; 
 
});

Test sample code

Answer 2

はdiv要素を削除します。

$(document).ready(function() { 
    $('#EmailAddress').focusout(function() { 
     var email = $.trim($('#EmailAddress').val() || ''); 
     if (email.length == 0 || !emailregx.test(email)) { 
      $(this).addClass('ChangetoYellow'); 
      if($(this).next().hasClass('Required')) 
       $(this).next().remove(); 
      $(this).after('<div class="Required">Enter valid Email.</div>'); 
      return false; 
     } else { 
      $(this).next(".Required").remove(); 
      $(this).removeClass('ChangetoYellow'); 
      return true; 
     } 
    }); 
}); 

Answer 3

$(this).after('<div class="Required">Enter valid Email.</div>'); 

これは、入力ボックスのうち、すべての焦点後に新しいが追加されます。

代わりに、テキストボックスの下にプレースホルダdivを置きます。

<div id="emailErrorMsg"></div> 

、これはまた、あなたがより多くのエラーメッセージを追加できます

$('#emailErrorMsg').html('Enter valid Email.'); 

を行います。

Answer 4

お試しくださいこれは最初に以前のエラーメッセージを削除して追加します。 http://jsbin.com/pujemay/edit?html,js,output