Versuche, Felder dynamisch mit jQuery zu validieren - benutzerdefinierte Funktion

Question

Ich arbeite an einer Validierungsfunktion in jQuery und bekomme ein bisschen fest. Ich habe eine funktionierende Version, die sehr lang und voll von hartcodierten Formwerten ist, die ich zu vermeiden versuche. Hier ist, was funktioniert, zur Zeit:

$(document).ready(function(){ 
    var fname = $("#formFName"); 
    var lname = $("#formLName"); 

    fname.blur(validateFName); 
    lname.blur(validateLName); 

    function validateFName(){ 
    if(fname.val().length > 0){ 
     fname.removeClass("req_error"); 
     return true; 
    } 
    else { 
     fname.addClass("req_error"); 
     return false; 
    } 
    } 

    function validateLName(){ 
    if(lname.val().length > 0){ 
     lname.removeClass("req_error"); 
     return true; 
    } 
    else { 
     lname.addClass("req_error"); 
     return false; 
    } 
    } 
}); 

Der Teil für diese beiden Felder funktioniert gut, aber ich möchte die ganze Sache in einer Funktion kapseln, die ein bisschen einfacher zu halten. Etwas wie folgt aus:

$(document).ready(function(){ 

    $("#first_name").blur(validateField("first_name","text")); 
    $("#last_name").blur(validateField("last_name","text")); 
    $("#email_address").blur(validateField("email_address","email")); 

    function validateField(formfield, type){ 
    var field = $("#" + formfield); 
    switch(type) { 
     case "text": 
     if(field.val().length > 0){ 
      field.removeClass("req_error"); 
      return true; 
     } 
     else { 
      field.addClass("req_error"); 
      return false; 
     } 
     break; 
     case "email": 
     var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/; 
     if(filter.test(field.val())) { 
      field.removeClass("req_error"); 
      return true; 
     else { 
      field.addClass("req_error"); 
      return false; 
     } 
     break; 
    } 
    } 
}); 

Allerdings, wenn ich tun, dass ich den folgenden Fehler in Firefox JS Fehlerprotokoll erhalten:

Fehler: ((f.event.special [r.origType] || {} .apply) .handle || r.handler) ist keine Funktion Quelldatei: /scripts/jquery-1.7.1.min.js Line: 3

eine schnelle Google für diesen Fehler hat nichts nachgegeben das bedeutet mir leider nichts. Ich habe Warnungen an verschiedenen Stellen ausprobiert und dabei festgestellt, dass die richtigen Formularfeldnamen tatsächlich dort übergeben werden, wo es sein sollte, aber da ich ziemlich neu bei jQuery bin (und nicht großartig bei JavaScript) bin ich bei ein bisschen Verlust hier.

Danke an alle, die mir in die richtige Richtung zeigen können. Wenn jemand denkt, dass ich das falsch mache, bin ich mehr als glücklich, mich zu ändern. Ich habe versucht, das jQuery-Validierungs-Plugin zu verwenden, aber ich verwende auch einige dynamisch erstellte Felder und das Plugin verhindert leider, dass der Besucher das Formular abschickt, wenn versteckte Pflichtfelder involviert sind.

Answer 1

Klingt wie Sie dies durch das Anbringen Verhalten anstelle von spezifischen Elemente vereinfachen könnte:

<input type="text" id="someId" class="validate-text" /> 
<input type="text" id="someOtherId" class="validate-email" /> 

$('.validate-text').live('blur', function() 
{ 
    $(this).removeClass('req_error'); 
    if($.trim(this.value).length < 1) 
     $(this).addClass('req_error'); 
}); 

$('.validate-email').live('blur', function() 
{ 
    // Same thing with the email validation logic 
}); 

Auf diese Weise müssen Sie nicht spezifische Event-Handler Ihre Elemente anbringen müssen und stattdessen diese Handler zu verwenden, das Verhalten zu überprüfen, die Sie wollen . Dann markieren Sie einfach HTML-Elemente mit bestimmten Klassen, um den gewünschten Validierungsmodus zu markieren.

Angenommen, ich verstehe Ihre Frage richtig.

Answer 2

Sie können einen Funktionsaufruf nicht an .blur() übergeben. Sie können eine anonyme Funktion Konstruktor übergeben:

$("#first_name").blur(function() {validateField("first_name","text");}); 

oder den Namen einer Funktion übergeben:

function validateFirstName() { 
    validateField("first_name","text"); 
} 

* * * 

$("#first_name").blur(validateFirstName)); 

@ Tejs Vorschlag Klassen zu verwenden Validatoren zu befestigen gut ist, wie gut.