I’m working on a JQuery form validation script (first project – don’t laugh) and so far I have the following code which seems to work.
I’d like to have this validation code execute in a sequence, examining the form values top down. Right now everything is firing all at once. How can I accomplish this?
Thank you!
// -----------------------------------------------
// 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');
}
}
}
The elements will be validated in the order which you have specified. Your script will be run on a single thread, starting from all .mcRequired fields in the order in which they appear in the DOM (which is the order defined in your html). Then the .mcEmail element will be examined and so forth.
For your information, there are plenty of plugins which do what your are trying to accomplish, best of which omho is the validation plugin
UPDATED: OK, I now understand what is that you want to achieve. There is the code that will hopefully do it. note that I have commented out all your “return false” and body.stop statements and added a bit of code at the end of the function to select all mcError elements. The additional benefit is that a lot of duplicating code is removed, although there is room for more re-factoring.