how to create functions in jquery and reusing them

Question

I've got the following code

if(!$rta_cl_fn.length > 0){
    formSubmit = false;
    $('#div_cl_fn').addClass('has-error');
}else{
    $('#div_cl_fn').removeClass('has-error');
}

if(!$rta_cl_ln.length > 0){
    formSubmit = false;
    $('#div_cl_ln').addClass('has-error');
}else{
    $('#div_cl_ln').removeClass('has-error');
}

if(!$rta_cl_mn.length > 0){
    formSubmit = false;
    $('#div_cl_mn').addClass('has-error');
}else{
    $('#div_cl_mn').removeClass('has-error');
}

and there's loads more i just wanted to make a function so i just call the function rather than using if statements again and again

I've asked many a times but no one seems to understand what i want... i can show you what i'm looking in php format below

public function functionName($var1, $var2){

    $formSubmit = true;

    if(!$var1.length > 0){
        formSubmit = false;
        $var2.addClass('has-error');
    }else{
        $var2.removeClass('has-error');
    }

    return formSubmit;
}

if you need more clarity please ask

html is below

<div class="row">
    <div class="col-md-3">
        <div class="form-group">
            <label class="control-label">First Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_fn" id="rta_cl_fn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-5">
        <div class="form-group" id="div_cl_fn">
            <label class="control-label">Middle Name <span class="required" aria-required="true" > * </span></label>
            <input type="text" name="rta_cl_mn" id="rta_cl_mn" class="form-control input-sm">
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group" id="div_cl_ln">
            <label class="control-label">Last Name<span class="required" aria-required="true" > *</span></label>
            <input type="text" name="rta_cl_ln" id="rta_cl_ln" class="form-control input-sm">
            <span class="help-block"></span>
        </div>
    </div>
</div>

again my question is how to declare/create functions in jQuery and using them in the code.

Regards

Answer 1

Here is how you can create reusable functions using jQuery

(function($) {
    $.fn.functionName = function (var1, var2) {
            var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
        }
    };
  }(jQuery));

USAGE:

console.log($(".form-group").functionName('param1', 'param2'));

OR

a pretty much simpler way is by using a var to declare your function.

var myReusableFunction = function(var1, var2){
        var formSubmit = true;

        if(!var1.length > 0){
            formSubmit = false;
            var2.addClass('has-error');
        }else{
            var2.removeClass('has-error');
        }

        return formSubmit;
};

USAGE:

You can call this function similar to normal javascript functions

console.log(myReusableFunction('param1', 'param2'));

Check this tutorial

Hope this helps.