jQuery - カスタム関数を使用してフィールドを動的に検証しようとしています

Question

jQueryで検証機能を使用していますが、少し時間がかかりました。私は非常に時間がかかり、私が避けようとしているハードコードされたフォームの値でいっぱいの作業バージョンを持っています。ここには、現在動作しているものがあります：

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

この部分は2つのフィールドで正常に動作しますが、その部分はメンテナンスするのが簡単な機能にすべてカプセル化したいと考えています。このような何か：

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

しかし、私はFirefoxのJSエラーログに次のエラーを取得することをん：

エラー：[r.origType]（（f.event.specialを|| {} ）.handle || r.handler）.apply機能 ソースファイルではありません。 ライン/scripts/jquery-1.7.1.min.js：3

をそのエラーの迅速なGoogleが何をもたらしていませんそれは残念なことに私に何かを意味します。私はさまざまな場所でアラートを試してきました。そうすることで、適切なフォームフィールド名が実際に存在する場所に渡されていることが確認されましたが、私がかなりjQueryを使い慣れているので（JavaScriptではうまくいきません）ここに損失のビット。

正しい方向に私を指すことができる誰にも感謝します。また、誰かが私が間違ったやり方でこのことについて考えていると思うならば、私は変えて喜んでいます。私はjQueryの検証プラグインを使用しようとしましたが、動的に作成されたフィールドもいくつか使用していますが、残念ながら、プラグインは隠された必須フィールドが含まれている場合に訪問者がフォームを送信できないようにします。

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

この方法は、あなたがあなたの要素に特定のイベントハンドラを添付して、代わりにあなたが望む行動を確認するために、これらのハンドラを使用する必要がいけない：

Answer 1

を使用して、特定の要素の代わりに行動を取り付けることで、これを簡素化することができような音。次に、HTML要素に特定のクラスをマークして、必要な検証モードをマークします。

私はあなたの質問を正しく理解していると仮定します。

Answer 2

.blur（）に関数呼び出し式を渡すことはできません。

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

または関数の名前を渡します：あなたは無名関数コンストラクタ渡すことができるバリデータを添付するクラスを使用するTejsの提案@

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

* * * 

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

をだけでなく、良いものです。