JQuery表单验证序列

时间：2011-12-26 04:18:30

标签： jquery validation

我正在研究一个JQuery表单验证脚本（第一个项目 - 不要笑）到目前为止，我有以下代码似乎可以工作。

我想让这个验证代码按顺序执行，自上而下检查表单值。现在一切都在同时开火。我怎么能做到这一点？

谢谢！

    // -----------------------------------------------
// FORM VALIDATION
// -----------------------------------------------
function mcValidateForm() {

    // -----------------------------------------------
    // CHECK - EMPTY INPUT TEXT
    // -----------------------------------------------
    $('.mcRequired').each(function() {
        var mcEmptyCheck = $.trim($(this).val());
        if(mcEmptyCheck == '' || mcEmptyCheck.length < 3) {
            mcResponse('- Please fill in the required field!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else {
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK - VALID EMAIL FORMAT
    // -----------------------------------------------
    $('.mcEmail').each(function() {
        var mcEmailCheck = $(this).val();
        var mcEmailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        if(!mcEmailCheck.match(mcEmailRegex)) {
            mcResponse('- Incorrect Email format!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
    });

    // -----------------------------------------------
    // CHECK - VALID WEB ADDRESS - URL
    // -----------------------------------------------
    $('.mcWebsite').each(function() {
        var mcUrlCheck = $(this).val();
        var mcUrlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

        if(!mcUrlCheck.match(mcUrlRegex)) {
            mcResponse('- Incorrect Website Address format!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else {
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK - SINGLE SELECT SELECTION
    // -----------------------------------------------
    $('.mcMenu').each(function() {
        var mcMenuCheck = $(this).val();
        if(mcMenuCheck == null || mcMenuCheck == 'Please Select One') {
            mcResponse('- Please make a Selection!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else if(mcMenuCheck != null) {
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK - MULTI SELECT SELECTION
    // -----------------------------------------------
    $('.mcList').each(function() {
        var mcSelectCheck = $(this).val();
        if(mcSelectCheck == null) {
            mcResponse('- Please make a Selection!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else if(mcSelectCheck != null) {
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK SINGLE CHECKBOX
    // -----------------------------------------------
    $('.mcCbxSingle').each(function() {
        var mcCbxCheck = $(this);
        if(!mcCbxCheck.is(':checked')) {
            mcResponse('- Please check the checkbox!', true);
            $(this).parents(':eq(1)').addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else{
            $(this).parents(':eq(1)').removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK CHECKBOX GROUPS
    // -----------------------------------------------
    $('.mcCbxGroup').each(function() {
        if($(this).find('input[type=checkbox]:checked').length == 0) { 
            mcResponse('- Please check at least one checkbox in the group!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else{
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // CHECK RADIO GROUP
    // -----------------------------------------------
    $('.mcRadGroup').each(function() {
        if($(this).find('input[type=radio]:checked').length == 0) { 
            mcResponse('- Please select a radio button!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else{
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // FILE UPLOAD - SINGLE
    // -----------------------------------------------
    $('.mcFileUpSingle').each(function() {
        if($(this).find('input[type=file]').val() == '') { 
            mcResponse('- Please select a file to upload!', true);
            $(this).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            return false;
        }
        else{
            $(this).removeClass('mcError');
        }
    });

    // -----------------------------------------------
    // FILE UPLOAD - GROUP
    // -----------------------------------------------
    $('.mcFileUpGroup').each(function() {
        $(this).addClass('mcError').fadeOut().fadeIn();
        $('.mcFileUpGroup input[type=file]').each(function() {
            if($(this).val() == '') { 
                mcResponse('- Upload file not selected!', true);
                $(this).parent().addClass('mcError');
                $('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
                return false;
            }
            else{
                $(this).removeClass('mcError');
                $(this).parent().removeClass('mcError');
            }
        });
    });

    // -----------------------------------------------
    // CHECK RECAPTCHA
    // -----------------------------------------------
    var mcRecaptchaDiv = $('#recaptcha_area');
    var mcReCaptcha = $('input[id=recaptcha_response_field]');
    var mcReCaptchaVal = mcReCaptcha.val();
    if(mcReCaptcha.is(':visible')) {
        if($.trim(mcReCaptchaVal) == ''){
            mcResponse('- Please enter the Captcha text as presented below!', true);
            $(mcRecaptchaDiv).addClass('mcError').fadeOut().fadeIn();
            $('html,body').stop().animate({scrollTop: $(mcRecaptchaDiv).offset().top},'slow');
            $(mcReCaptcha).focus();
            return false;
        } else {
            $(mcRecaptchaDiv).removeClass('mcError');
        }
    }
}

1 个答案:

答案 0 :(得分：0)

元素将按照您指定的顺序进行验证。您的脚本将在单个线程上运行，从所有.mcRequired字段开始，按照它们在DOM中出现的顺序（这是您在html中定义的顺序）。然后将检查.mcEmail元素，依此类推。

为了您的信息，有很多插件可以完成您想要完成的任务，其中最好的是validation plugin

更新：好的，我现在明白你想要实现的目标。有希望这样做的代码。请注意，我已经注释掉了所有“return false”和body.stop语句，并在函数末尾添加了一些代码来选择所有mcError元素。额外的好处是删除了大量重复代码，尽管有更多重新分解的空间。

// -----------------------------------------------
// FORM VALIDATION
// -----------------------------------------------  
function mcValidateForm() {

// -----------------------------------------------
// CHECK - EMPTY INPUT TEXT
// -----------------------------------------------
$('.mcRequired').each(function() {
    var mcEmptyCheck = $.trim($(this).val());
    if(mcEmptyCheck == '' || mcEmptyCheck.length < 3) {
        mcResponse('- Please fill in the required field!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else {
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK - VALID EMAIL FORMAT
// -----------------------------------------------
$('.mcEmail').each(function() {
    var mcEmailCheck = $(this).val();
    var mcEmailRegex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if(!mcEmailCheck.match(mcEmailRegex)) {
        mcResponse('- Incorrect Email format!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
});

// -----------------------------------------------
// CHECK - VALID WEB ADDRESS - URL
// -----------------------------------------------
$('.mcWebsite').each(function() {
    var mcUrlCheck = $(this).val();
    var mcUrlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;

    if(!mcUrlCheck.match(mcUrlRegex)) {
        mcResponse('- Incorrect Website Address format!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else {
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK - SINGLE SELECT SELECTION
// -----------------------------------------------
$('.mcMenu').each(function() {
    var mcMenuCheck = $(this).val();
    if(mcMenuCheck == null || mcMenuCheck == 'Please Select One') {
        mcResponse('- Please make a Selection!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        ///return false;
    }
    else if(mcMenuCheck != null) {
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK - MULTI SELECT SELECTION
// -----------------------------------------------
$('.mcList').each(function() {
    var mcSelectCheck = $(this).val();
    if(mcSelectCheck == null) {
        mcResponse('- Please make a Selection!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else if(mcSelectCheck != null) {
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK SINGLE CHECKBOX
// -----------------------------------------------
$('.mcCbxSingle').each(function() {
    var mcCbxCheck = $(this);
    if(!mcCbxCheck.is(':checked')) {
        mcResponse('- Please check the checkbox!', true);
        $(this).parents(':eq(1)').addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else{
        $(this).parents(':eq(1)').removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK CHECKBOX GROUPS
// -----------------------------------------------
$('.mcCbxGroup').each(function() {
    if($(this).find('input[type=checkbox]:checked').length == 0) { 
        mcResponse('- Please check at least one checkbox in the group!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else{
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// CHECK RADIO GROUP
// -----------------------------------------------
$('.mcRadGroup').each(function() {
    if($(this).find('input[type=radio]:checked').length == 0) { 
        mcResponse('- Please select a radio button!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else{
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// FILE UPLOAD - SINGLE
// -----------------------------------------------
$('.mcFileUpSingle').each(function() {
    if($(this).find('input[type=file]').val() == '') { 
        mcResponse('- Please select a file to upload!', true);
        $(this).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
        //return false;
    }
    else{
        $(this).removeClass('mcError');
    }
});

// -----------------------------------------------
// FILE UPLOAD - GROUP
// -----------------------------------------------
$('.mcFileUpGroup').each(function() {
    $(this).addClass('mcError').fadeOut().fadeIn();
    $('.mcFileUpGroup input[type=file]').each(function() {
        if($(this).val() == '') { 
            mcResponse('- Upload file not selected!', true);
            $(this).parent().addClass('mcError');
            //$('html,body').stop().animate({scrollTop: $(this).offset().top},'slow');
            //return false;
        }
        else{
            $(this).removeClass('mcError');
            $(this).parent().removeClass('mcError');
        }
    });
});

// -----------------------------------------------
// CHECK RECAPTCHA
// -----------------------------------------------
var mcRecaptchaDiv = $('#recaptcha_area');
var mcReCaptcha = $('input[id=recaptcha_response_field]');
var mcReCaptchaVal = mcReCaptcha.val();
if(mcReCaptcha.is(':visible')) {
    if($.trim(mcReCaptchaVal) == ''){
        mcResponse('- Please enter the Captcha text as presented below!', true);
        $(mcRecaptchaDiv).addClass('mcError').fadeOut().fadeIn();
        //$('html,body').stop().animate({scrollTop: $(mcRecaptchaDiv).offset().top},'slow');
        //$(mcReCaptcha).focus();
        //return false;
    } else {
        $(mcRecaptchaDiv).removeClass('mcError');
    }
}
var $errors = $("mcError");
if($errors.size() > 0){
    $('html,body').stop().animate({scrollTop: $errors.filter(":last").offset().top},'slow');
    return false;
}
}
相关问题
最新问题