StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery .each() only looping once with if statement
text
Body
copied!<p>So I am coming across an odd bug with the jQuery .each().</p> <p>Sorry for no fiddle, but for some reason my work is banning the iframe generating the actual results preventing me from verifying that the fiddle is working before presenting. If an answer doesn't arrive before I come home I will make a fiddle for this and update it.</p> <p>I am writing code that on click gets the elements of the clicked elements data attribute. it then loops through the entire document searching for form elements that have that particular class. This is just part of my first plugin that I am trying to write for form validation.</p> <p>What is happening is inside the .each() I am then doing an if statement that checks the form elements class to the variable pulled from the click element. It only loops once time and then doesn't continue to the next element. Now if instead of a variable I put a string to compare in the if statement it loops through everything fine but that doesn't make the function adaptive.</p> <p>Here are the functions</p> <pre><code>;(function(window,$,e){ function setDefaults(e, el) { window.$this = $(el) window.fieldValue = $this.value; window.fieldData = $this.data(); window.defaults = { fieldType: 'input', //specify if input or submit keyup: '', //keydown or keypress targetClass: '', specialType: '', //currently accepts VIN, USPhone and Email datatype: '', //intLetter(accepts only integers and numbers), integer, float, floatInteger(accepts both floats or integer) letters, or all(accepts anything the user types) inputLength: '', //define max length user can input regEx: '', //define ur own regular expression (this will override the datatype) message: '' } window.validObj = $.extend({}, defaults, fieldData.valid); window.keyEvent = validObj.keyup; window.fieldType = validObj.fieldType; window.targetClass = validObj.targetClass; window.specialType = validObj.specialType.toUpperCase(); window.inputType = validObj.datatype; window.inputLength = validObj.inputLength; window.inputRegEx = validObj.regEx; window.inputMessage = validObj.message; } function runValidation (e, el, inputValue) { if (specialType != '') { switch (specialType) { case "EMAIL": inputType = "email"; inputRegEx = null; setRegEx(e, el, elValue); break; case "VIN": inputType = "intLetter"; inputLength = 17; inputRegEx = null; setRegEx(e, el, elValue); break; case "USPHONE": inputLength = 10; inputType = "integer"; inputRegEx = null; setRegEx(e, el, elValue); break; } } else { setRegEx(e, el, elValue); } } function setRegEx(e, el, inputValue) { var fieldName = $(el).attr('name'); if (inputRegEx == null || inputRegEx == '') { switch (inputType) { case "email": inputRegEx = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; if (inputMessage == "") { inputMessage = "Please enter a valid email."; } regExChecks(e, el, elValue, inputMessage); break; case "letters": inputRegEx = /^[a-zA-Z]+$/; if (inputMessage == "") { inputMessage = fieldName.toUpperCase() + ' must contain only letters.'; } regExChecks(e, el, elValue, inputMessage); break; case "integer": inputRegEx = /^[0-9]+$/; if (inputMessage == "") { inputMessage = fieldName.toUpperCase() + ' must contain only whole numbers.'; } regExChecks(e, el, elValue, inputMessage); break; case "float": inputRegEx = /^[0-9]*[.][0-9]+$/; if (inputMessage == "") { inputMessage = fieldName.toUpperCase() + ' must be a decimal ex(.13).'; } regExChecks(e, el, elValue, inputMessage); break; case "floatInteger": inputRegEx = /^\$?(\d+|\d*\.\d+)$/; if (inputMessage == "") { inputMessage = fieldName.toUpperCase() + ' can be a decimal or whole number ex(.13, 1, or 1.13).'; } regExChecks(e, el, elValue, inputMessage); break; case "intLetter": inputRegEx = /^[0-9a-zA-Z]+$/; if (inputMessage == "") { inputMessage = fieldName.toUpperCase() + ' must contain only whole numbers and letters.'; } regExChecks(e, el, elValue, inputMessage); break; } } } function keyValidate(e) { $('input, select, textarea').on('focus', function(e) { if ($(this).attr('data-valid') !== undefined) { setDefaults(e, this); eventType(e, this); } }); } function clickValidate(e) { $(document).on('click', function(e) { var clickTarget = e.target; setDefaults(e, clickTarget); if (fieldType == 'submit') { $('.' + targetClass).each(function (index) { var element = $(this); e.preventDefault(); setDefaults(e, element); }); } }) } function eventType (e, el) { var element = $(el); if (keyEvent == true) { element.on('keyup', function(e, el) { elValue = element.val(); runValidation(e, element, elValue); }) } } function regExChecks(e, el, inputValue, message) { var regEx = new RegExp(inputRegEx); var errorClass = $(el).next().attr('class') if (errorClass == 'error-messages') { $(el).next().remove(); } $(el).next().remove() if (!regEx.test(elValue)) { var elWidth = $(el).width(); var messageContainer = $('<div/>', {css:{'display':'none'}}).addClass('error-messages').insertAfter($(el)); $('<span>'+message+'</span>').appendTo(messageContainer); $('.error-messages').css('width', elWidth); $('.error-messages').show(); return false; } } keyValidate(e); clickValidate(e); })(window, jQuery); </code></pre> <p>The e.preventDefault is there only temporarily that way the screen doesn't refresh since I haven't gotten further in the code. In the clickValidate function if i chance the if statements comparison variable targetClass to the actual class name of the input 'shellCreate' it works. Unfortunately that won't allow a user to specify what form elements to look into. Now the way the html would look:</p> <pre><code><input class="shellCreate" type="text" name="vin" id="vin" data-valid='{"datatype":"integer", "keyup":true}' /> <input type="submit" value="Submit" class="red-BTN" data-valid='{"fieldType":"submit", "targetClass":"shellCreate"}' /> </code></pre> <p>Thank you for your help (and if you see just any glaring issues with the code in general any insight is helpful as this is my first plugin i am writing)</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload