Question

Am trying to put together a form validation script, and i hit a snag when i wanted to have callback functions in my validation rules. The validation rules are defined in the html using data attributes
here the 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>

I’ve been able to deal with the required rule, but i cant seem to figure what to do for the callbacks, this the 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);
        });

Please help me out.

Answer 1

If these callback functions are global, you can simply do:

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

Or, if your callback would like to have the field in question set as the this value, then you’d do:

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

---

If you’ve defined these callbacks as properties of some other object, then you’d do the same thing:

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

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