사용자 입력에 따라 동적으로 오류 div를 변경하십시오.

Question

사용자가 신용 카드 필드에 입력 한 자릿수에 따라 오류 메시지를 변경하고 싶습니다.

let numberDigit; 
let creditCardMessage; 

if ($cardNumber.val().length < 13) { 
    numberDigit = 'Too few digits. '; 
} else if ($cardNumber.val().length > 16) { 
    numberDigit = 'Too many digits. '; 
} 
creditCardMessage = numberDigit + 'Please enter between 13 and 16'; 

가 그럼 난 다음 함수에 creditCardMessage 변수를 전달하려면 : 나는이와 메시지 변수를 생성하기 위해 노력하고있어

function creditCardNumberEvent() { 

if (!isCreditCardValid()) { 
showErrorMessage ($cardNumber, creditCardMessage, $cardNumber, 'creditCardError'); 
} else { 
removeErrorMessage($cardNumber, '#creditCardError'); 
} 
} 

내가 할 모든 첫 번째 값이다 -은 "너무 소수 자리. " 미리 감사드립니다. 스크립트를 실행하는 경우

Answer 1

, 당신은 당신이 이걸 알아낼 않았다 if(CardNumberValid())

function CardNumberValid() { 
 
    var valid = true; 
 
    var CardNumber = $("#CardNumber"); 
 
    if (CardNumber.val().length < 13) { 
 
    $("#ErrorMsg").text("Too few digits. Please enter between 13 and 16"); 
 
    valid = false; 
 
    } else if (CardNumber.val().length > 16) { 
 
    $("#ErrorMsg").text("Too many digits. Please enter between 13 and 16"); 
 
    valid = false; 
 
    } 
 
    if(valid){ 
 
    $("#ErrorMsg").text(""); 
 
    } 
 
    return valid; 
 
} 
 

 
$('#Validate').click(function() { 
 
    alert("The card number " + (CardNumberValid() ? "is" : "is not") + " valid."); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="CardNumber" /> 
 
<div id="ErrorMsg" style="color:red;"></div> 
 
<button id="Validate" type="button">Validate</button>

Answer 2

처럼 if 문에서 사용할 수 있습니다 의미 부울을 반환 CardNumberValid()를 호출 할 수 있습니다. 내가 제안하는 함수를 만들고 다른 함수의 인수로 그 기능을 건네 :

: 이것은 당신이 달성하려고하는 것입니다 내 생각

function creditCardMessageFunction() { 

let numberDigit; 
let creditCardMessage; 

    if ($cardNumber.val().length < 13) { 
    numberDigit = 'Too few digits. '; 
    } else if ($cardNumber.val().length > 16) { 
    numberDigit = 'Too many digits. '; 
    } else { 
    numberDigit = 'Numeric Values Only. '; 
} 
creditCardMessage = numberDigit + 'Please enter numbers between 13 and 16.'; 
return creditCardMessage; 
} 

Answer 3

(콜백 함수는 내가 지금 알고)

function logValidationMessage() { 
 
    var cardNumber = document.getElementById('cardNumber'); 
 

 
    var numberDigits = null; 
 

 
    if (cardNumber.value.length < 13) { 
 
    numberDigits = 'Too few digits. '; 
 
    } else if (cardNumber.value.length > 16) { 
 
    numberDigits = 'Too many digits. '; 
 
    } else { 
 
    numberDigits = 'Card number is valid.'; 
 
    } 
 

 
    console.log(numberDigits); 
 
} 
 

 
document.getElementById('btnCheckCardNumber').addEventListener('click', logValidationMessage);

<input type="text" id="cardNumber" /> 
 
<input type="button" id="btnCheckCardNumber" value="Check" />