Jquery Focusout läuft mehrere Male bei jedem Mausklick

Question

Ich versuche, die Textbox mit der Maus in jquery zu validieren, mein Code läuft mit jeder Maus aus bedeutet, es zeigt gültige E-Mail eingeben. mehrmals, wenn ich außerhalb des Textfelds klicke. Dies ist mein Code:

$(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; 
     } 
    }); 
}); 

mein Code funktioniert nicht, wenn es außerhalb des document.ready ist. Diese

ist das, was ich bekomme, wenn ich jedes Mal laufe ich klicken:

Answer 1

ich einige Code implementiert haben Textfeld zu validieren und Fehler div nach dem Einfügen Element, wenn der eingegebene Wert nicht gültig ist.

ich unten Code hoffen, dass Ihr Problem

$(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

Entfernen Sie die div, bevor Sie eine hinzufügen Wiederholungen zu verhindern.

$(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>'); 

wird dies eine neue hinzufügen, nachdem jeder aus der Box Eingang konzentrieren.

Stattdessen ein Platzhalter div unterhalb des Textfelds.

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

und tun

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

dies wird Ihnen auch mehr Fehlermeldungen hinzufügen lassen.

Answer 4

Versuchen Sie diese zuerst entfernen Sie vorherige Fehlermeldungen und fügen Sie sie hinzu.

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; 
    } 
    }); 
}); 

Für einfaches Beispiel Fiddle (wenn u den regulären Ausdruck hinzufügen möchten, und testen) - http://jsbin.com/pujemay/edit?html,js,output