所以我遇到了jQuery .each()的奇怪错误。
很抱歉没有小提琴,但出于某种原因,我的工作是禁止iframe生成实际结果,这使我无法在呈现之前验证小提琴是否正常工作。如果在我回家之前答案没有到达,我会为此做一个小提琴并更新它。
我正在编写代码,点击后获取被点击元素数据属性的元素。然后循环遍历整个文档,搜索具有该特定类的表单元素。这只是我试图为表单验证编写的第一个插件的一部分。
正在发生的事情是在.each()中我正在做一个if语句,它将表单元素类检查到从click元素中提取的变量。它只循环一次,然后不继续下一个元素。现在,如果不是变量,我在if语句中放置一个字符串进行比较,它循环通过一切正常,但这不会使函数自适应。
以下是功能
;(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);
e.preventDefault只是暂时以这种方式屏幕不刷新,因为我没有进一步的代码。在clickValidate函数中,如果我将if语句比较变量targetClass转换为输入'shellCreate'的实际类名,则它可以工作。不幸的是,这将不允许用户指定要查看的表单元素。现在html的样子:
<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"}' />
感谢您的帮助(如果您看到代码中的任何明显问题,那么任何见解都会有所帮助,因为这是我写的第一个插件)