Выполнение обратного вызова, определенного в элементе atrribute

Question

Я пытаюсь собрать скрипт проверки формы, и я попал в ловушку, когда мне захотелось иметь функции обратного вызова в моих правилах проверки. Правила проверки определяются в HTML с использованием атрибутов данных здесь 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> 

Я был в состоянии справиться с требуемым правилом, но я не могу показаться, чтобы выяснить, что делать для обратных вызовов, этого Javascript

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 callbackHolder = { 
    callback1: function() { }, 
    callback2: function() { } 
}; 

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

Answer 2

у вас есть это:

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

удлиняет его к этому:

// 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()

ПРИМЕЧАНИЕ: непроверенный - просто отправная точка, чтобы отделить наш код от управляемых модулей, а не приносить его всем встроенным, если вам нужно повторно использовать свою проверку или изменить свой код в строке.