要素atrributeで定義されたコールバックを実行

Question

フォーム検証スクリプトをまとめようとしていますが、検証ルールでコールバック関数を使用したいと思っていました。検証ルールは、私は必要なルールに対処することができましたが、私はこのJavaScript、コールバックのために何をすべきかを把握するように見えるカントのデータはここ をHTML属性

<div class="clearfix"> 
        <input type="text" name="first_name" placeholder="First Name" id="_fname" data-required='yes' /> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 
       <div class="clearfix"> 
        <input type="text" name="last_name" placeholder="Last Name" id="_lname" data-required='yes' /> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 
       <div class="clearfix"> 
        <input type="text" name="email" 
         placeholder="Email Address" id="_email" 
         data-required='yes' data-has-callback="yes" 
         data-callback="email_check" 
        /> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 

       <div class="clearfix"> 
        <input type="text" name="username" 
         placeholder="Username" id="_username" 
         data-required='yes' data-has-callback="yes" 
         data-callback="username_check" 
        /> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 
       <div class="clearfix"> 
        <input type="password" name="password" placeholder="Password" id="_password" data-required='yes'/> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 
       <div class="clearfix"> 
        <input type="password" name="confpass" placeholder="Confirm Password" id="_confpass" data-required='yes' /> 
        <span class="form-validation-status"></span> 
        <div class="form-error-msg"></div> 
       </div> 
       <div class="clearfix"> 
        <input type="submit" value="Sign Up" class="btn btn-large btn-primary" id="signup-btn" /> 
       </div> 

を使用して、HTMLで定義されています

var required_fields = $("input[data-required='yes']"); 
     var has_callbac =$("input[data-has-callback='yes']"); 

     /* VALIDATE REQUIRED FIELDS */ 
     $.each(required_fields,function(index,item){ 
      var field = $(item); 
      var status = field.next(); 
      var field_name = field.attr("placeholder"); 
      var error_msg = "The "+field_name+" cannot be empty"; 
      var form_error = field.siblings('span.form-validation-status').next(); 
      field.blur(function() { 
       var _field_val = ($(this).val()); 
       form_error.html(''); 
       status.removeClass('error-status'); 
       if(_field_val == ""){ 
        validation_errors++; 
        status.addClass('error-status'); 
        form_error.html(error_msg); 
       }else { 
        status.addClass('ok-status'); 
        validation_errors= validation_errors + 1 - 2; 
       } 
      }); 
     }); 

     /* VALIDATE FIELDS WITH CALLBACKS */ 
     $.each(has_callbac,function(index,item) { 
      var field = $(item); 
      var status = field.next(); 
      var form_error = field.siblings('span.form-validation-status').next(); 
      var callback = field.attr("data-callback"); 
      var callback_func = callback+"()"; 
      var test = typeof callback_func; 
        //i got confused at this point 
      console.log(test); 
     }); 

私を助けてください。

Answer 1

これらのコールバック関数がグローバルである場合、あなたは、単に行うことができます。

var callback = field.attr("data-callback"); 
window[callback](); 

それとも、あなたのコールバックは、あなたがやるだろう、this値として設定し、問題のフィールドを持ちたい場合：

var callback = field.attr("data-callback"); 
window[callback].call(field); //and of course tack on any other parameters you have 

---

あなたには、いくつかの他のオブジェクトのプロパティとしてこれらのコールバックを定義した場合は、同じことを行いたい：

を

var callback = field.attr('data-callback'); 

これにそれを拡張：

var callbackHolder = { 
    callback1: function() { }, 
    callback2: function() { } 
}; 

var callback = field.attr("data-callback"); 
callbackHolder[callback](); 

Answer 2

あなたは、これは持っている

// check if the value is a function in the global scope 

if('function' == typeof(window[callback])) { 
callback(); 
} 

関数はグローバルスコープにない場合、あなたはそのロジックを変更する必要があります。

EDIT：

ローカルスコープで作業している場合は、あなたのような一般的な検証機能を追加することから利益を得ることができる：

：

(function($){ 
$.fn.form_validation=function(){ 
    var rules = { 
    callback_one: function(fieldvalue) { 
     var response = { 
     'code':'failed', 
     'reason':'Missing or incomplete' 
     }; 
     //some validation here 
     return response; 
    }, ... 
    } 
    var rule = '', args = []; 

    if(arguments.length > 0) { 
     if('object' === typeof(arguments[0])) { 
     args = arguments; 
     } else if('undefined' !== typeof(rules[arguments[0]])) { 
     args = Array.prototype.slice.call(arguments); 
     args.shift(); 
     rule = arguments[0]; 
     } 
    } 
    rules[ rule ].apply(this, args); 
} 
}($)); 

次に、あなたのような何かを呼び出すことができます

var result = $.form_validation(callback,data); 

以内$.each()

注：は検証されていません。検証を再利用したり、コードをインラインで編集したりする必要がある場合に備えて、すべてのインラインを使用するのではなく、制御可能なモジュールにコードを分割するための出発点です。