jquery - Understanding and correcting the structure of Javascript code -

jquery - Understanding and correcting the structure of Javascript code -

so i've been on here awhile, , i'm still considered entry level programmer based on general knowledge of construction , basic concepts. have function below given me in reply different question asked. can understand of doing, need help understanding rest of does. i'm asking because understand farther advanced concepts of javascript, , jquery.

so i've done below placed function, , i'll comment in know function doing @ where, , i'll place question marks i"m confused.

function validate(){ //array of objeccts used defined class selector each element iterated //with validation function assigned specific selector var fields = [ { selector: $('.not-empty'), validations: [ isnotempty] }, { selector: $('.email'), validations: [ isnotempty, isemail] }, { selector: $('.number'), validations: [ isnotempty, isnumber] }, { selector: $('.number-noreq'), validations: [isnumbernotrequired] }, { selector: $('.checked'), validations: [ischecked] } ]; //remove classes of 'has-error' each element traversed before validation begins $('.form-control').closest('.form-group').removeclass('has-error'); //defining variables var = 0, k = 0, z = 0, j = fields.length, item, selector, fn, info; //for loop traverse fields array of objects for(; < j; i++){ item = fields[i]; //traversing each field.validation for(k = 0; k < item.validations.length; k++){ fn = item.validations[k]; //setting fn function found in validation //traversing each selector in item for( z = 0; z < item.selector.length; z++){ selector = $(item.selector[z]); //setting selector //attempting set info closest form or input grouping found selector info = selector.closest('.form-group, .input-group'); if(info) //if info contains info //?????????????????????????????????????? no thought what's going on below other //other it's running validation function passed, why //is written , doing? info[fn(selector.val()) ? 'removeclass' : 'addclass']('has-error'); } } } }

so basic question have code (where question marks are). if can reply going on, why write code that, purpose of is, , benefcial or not, fantastic. if need more clarification happy provide it. want able explain code , know talking instead of trying have bs through it. think einstein said, "if can't explain accurately , point, not understand it" or that!

thank in advance!

edit: here functions 'validations' traverse through

//validation functions function isnotempty(value){ homecoming value && $.trim(value).length > 0; } function isemail(value){ homecoming /^([^@\s\t\n]+\@[\w\d]+\.[\w]{2,3}(\.[\w]{2})?)$/.test(value); } function isnumber(value){ homecoming /^\d+$/.test(value); } function isnumbernotrequired(value){ homecoming /^\d+$/.test(value) || value.length < 1; } function ischecked(value){ var r = false; var name = $(value).attr('name'); $('input[name="'+name+'"').each(function(){ if($(this).is(':checked')){ r = true; } }); homecoming r; }

second edit/update: have determined there severe error in code allows not maintain track of validation , take business relationship previous validations input groups, , other related sections. how corrected. i'm testing items on jsfiddle @ moment homecoming when have restuls!

this line:

info[fn(selector.val()) ? 'removeclass' : 'addclass']('has-error');

is equivalent this:

var result = fn(selector.val()); if (result) info.removeclass("has-error"); else info.addclass("has-error");

how that? well, code calls function plucked list of validation routines stored in info structure, passing value of field tested. result of function phone call used true/false test in ? : expression. if result true, ? : resolves string "removeclass"; if false, "addclass".

now, info? it's jquery object refers closest piece of dom (presumably) error message displayed, or other indicator shown based on css rule. [ ] operator take whichever of 2 strings ? : resolves , utilize property accessor. net effect, therefore, reference either info.removeclass or info.addclass. both references jquery methods, 1 or other called. in either case, code wants operate on class name "has-error", because wants either add together (when validation fails) or remove (when validation succeeds).

that said, code has serious defect: if, given field, there in fact list of validation functions, code run of them (which fine). however, each validation function, sets or clears "has-error" class without regard prior validation results. might work, if you're careful ordering of validation functions, that's awfully fragile way of doing things. think much more robust if made each test , kept track of whether any test failed, , after process finish given field it'd set or clear "has-error" class.

fixing code isn't hard. iterates the validation functions outside iteration on selected fields, (i think) backwards. however, long checks state of error indicator element(s), should ok.

first, @ top, code removes "has-error" .form-group elements not .input-group elements. that's incorrect, so:

$('.form-control').closest('.form-group, .input-group').removeclass('has-error');

then, in loop:

for( z = 0; z < item.selector.length; z++){ selector = $(item.selector[z]); //setting selector //attempting set info closest form or input grouping found selector info = selector.closest('.form-group, .input-group'); if (info.length && !fn(selector.val())) // if info contains info , field invalid info.addclass('has-error'); }

since "has-error" flags cleared @ outset, need add class classes invalid. if wanted have positive "is-ok" class, you'd add together @ top , remove when find error.

javascript jquery