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

要素は、指定した順序で検証されます。スクリプトは、すべての.mcRequiredフィールドから、DOMに表示される順序（htmlで定義された順序）で始まる単一のスレッドで実行されます。次に、.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フォーム検証シーケンス

答えて

関連する問題