jQuery .each()只用if语句循环一次

时间:2013-12-05 13:39:36

标签: javascript jquery html if-statement each

所以我遇到了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"}' />

感谢您的帮助(如果您看到代码中的任何明显问题,那么任何见解都会有所帮助,因为这是我写的第一个插件)

0 个答案:

没有答案