JQuery 폼 유효성 검사 시퀀스

JQuery 폼 유효성 검사 스크립트 (첫 번째 프로젝트 - 웃지 마세요)에서 작업 중이며 지금까지 작동하는 다음 코드가 있습니다.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-\.][email protected]([\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'); 
     } 
    } 
}

출처

2011-12-26 user1002039

요소는 지정한 순서대로 유효성이 검사됩니다. 스크립트는 DOM에 표시되는 순서 (HTML에서 정의 된 순서)로 모든 .mcRequired 필드부터 시작하여 단일 스레드에서 실행됩니다. 그런 다음 .mcEmail 요소를 검사합니다. 당신의 내용

는, omho 최고의있는 당신이 달성하려고하는 일을 할 플러그인의 많음이있다하여 업데이트 validation plugin

입니다 : OK, 지금 당신이 달성하고자하는 것이 무엇인지 잘 알고 있습니다. 희망적으로 할 코드가 있습니다. 모든 "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-\.][email protected]([\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; 
} 
}

출처

2011-12-26 04:30:34

예, 지금은 각 유효성 검사 그룹에서 오류가있는 첫 번째 요소를 강조 표시하고 마지막 유효성 검사 오류가 발생한 양식의 마지막 오류까지 스크롤합니다. 오류가 정정되면 각 그룹의 다음 오류를 강조 표시합니다. 이것은 너무 이상해서 시퀀스를 제어하고 싶었습니다. – user1002039

위의 해결책을 시도해보고 문제가 있으면 알려주십시오. html없이 테스트 할 수는 없지만 제대로 작동합니다. –

정말 고마워요! 이것은 많은 도움이됩니다! – user1002039

JQuery 폼 유효성 검사 시퀀스

답변

관련 문제