もっと簡潔なjQuery if/else for input validation

Question

私はPayment.jsプラグインを使用してクレジットカードの入力フィールドをフォーマットして検証しています。私はkeyup/focusoutでクライアント側を検証する必要があります。また、サーバーのサブミット後にエラーメッセージが返されます。エラー・スタイリングは、無効なフィールドに固有のものにしたい。私のコードは私が望むように動作していますが、より効率的に/簡潔にしたいと思います。どんなアドバイスも大歓迎です！

1）やる$toggleErrorStyling機能にそうdo(cond)パターン

でif (cond) do(true) else do(false)パターンを置き換えます：ここで

$(function() { 
    // Initiate payment.js plugin 
    $('.cc-num').payment('formatCardNumber'); 
    $('.cc-exp').payment('formatCardExpiry'); 
    $('.cc-cvc').payment('formatCardCVC'); 

    // Toggle error styling 
    $toggleErrorStyling = function(el, erred) { 
     var inputContainer = $(el).parents('.input-container'); 
     if (erred) { 
      inputContainer.addClass('has-error').removeClass('has-success'); 
     } else { 
      inputContainer.removeClass('has-error').addClass('has-success'); 
     } 
    }; 

    // Validate each form field 
    $('.paymentInput').bind('focusout', function() { 
     var valid, 
      erred = function(valid) {}, 
      $hdnCCType = $('input[id$="hdnCCType"]'), 
      $cardType = $.payment.cardType($('.cc-num').val()), 
      $errorMsg = $('.alert-danger'); 

     if ($(this).hasClass('cc-num')) { 
      valid = $.payment.validateCardNumber($(this).val()); 
      if (valid) { 
       $hdnCCType.val($cardType); // set the hidden value to post back to the Server 
      } 
     } else if ($(this).hasClass('cc-exp')) { 
      // validate expiry date 
      valid = $.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')); 
     } else if ($(this).hasClass('cc-cvc')) { 
      //validate security code 
      valid = $.payment.validateCardCVC($('.cc-cvc').val(), $cardType); 
     } 

     $errorMsg.hide(); 
     erred(valid); 
     $toggleErrorStyling(this, !valid); 
    }); 

    // After form submit, 
    // if .alert-danger is visible on the page, 
    // validate all three inputs, 
    // but return error styling only on the invalid ones, 
    // and ignore hash marks on browser back from verify ?edit=T 
    if ($(".alert-danger").is(":visible")) { 
     var $cardType = $.payment.cardType($('.cc-num').val()); 

     if (!$.payment.validateCardNumber($('.cc-num').val())) { 
      $toggleErrorStyling($('.cc-num'), true); 
     } else { 
      $toggleErrorStyling($('.cc-num'), false); 
     } 

     if (!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))) { 
      $toggleErrorStyling($('.cc-exp'), true); 
     } else { 
      $toggleErrorStyling($('.cc-exp'), false); 
     } 

     if (!$.payment.validateCardCVC($('.cc-cvc').val(), $cardType)) { 
      $toggleErrorStyling($('.cc-cvc'), true); 
     } else { 
      $toggleErrorStyling($('.cc-cvc'), false); 
     } 
    } 
}); 

Answer 1

は、あなたのコードをより簡潔にする方法についていくつかのアイデアがある

inputContainer.addClass('has-error').toggleClass('has-success', !erred); 

そしてブロックでは：

代わりに if (a) value = x else if (b) value = y else value = zパターンの

$toggleErrorStyling($('.cc-num'), !$.payment.validateCardNumber($('.cc-num').val())); 
$toggleErrorStyling($('.cc-exp'), !$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))); 
$toggleErrorStyling($('.cc-cvc'), !$.payment.validateCardCVC($('.cc-cvc').val(), $cardType)); 

2）、三項演算子を使用します。以下のようにvalueに割り当てるvalue = a ? x : b ? y : z

を：

valid = $(this).hasClass('cc-num') 
    // set the hidden value to post back to the Server 
    ? $.payment.validateCardNumber($(this).val()) && $hdnCCType.val($cardType) 
    : $(this).hasClass('cc-exp') 
     // validate expiry date 
     ? $.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')) 
     // *** cc-cvc is only possible class left, so no need to test it 
     //validate security code 
     : $.payment.validateCardCVC($('.cc-cvc').val(), $cardType); 

&&が非ブールtruthy値を生成することができますと、あなたはへの呼び出しを変更する必要がある場合があります。

erred(!!valid); 

その機能の実装が空であったため、この変更が本当に必要かどうかはわかりません。