Change popup window alert to inline error message

Hi,

I am new to javascript and would like to use the below script for validation. However, instead of having the popup window for errors I want to have the error message show right below the field box. Can someone please show me how to accomplish that or point me to the right direction on doing it? I tried to include display inline to call the function but it does not work.

Thanks.

[CODE]
var ccErrorNo = 0;
var ccErrors = new Array ()

ccErrors [0] = “Unknown card type”;
ccErrors [1] = “No card number provided”;
ccErrors [2] = “card number is in invalid format”;
ccErrors [3] = “card number is invalid”;
ccErrors [4] = “card number has an inappropriate number of digits”;

function checkCreditCard (cardnumber, cardname) {

var cards = new Array();

cards [0] = {name: “Visa”,
length: “13,16”,
prefixes: “4”,
checkdigit: true};
cards [1] = {name: “MasterCard”,
length: “16”,
prefixes: “51,52,53,54,55”,
checkdigit: true};

var cardType = -1;
for (var i=0; i<cards.length; i++) {

if (cardname.toLowerCase () == cards[i].name.toLowerCase()) {
cardType = i;
break;
}
}

if (cardType == -1) {
ccErrorNo = 0;
return false;
}

if (cardnumber.length == 0) {
ccErrorNo = 1;
return false;
}

cardnumber = cardnumber.replace (/s/g, “”);

var cardNo = cardnumber
var cardexp = /^[0-9]{13,19}$/;
if (!cardexp.exec(cardNo)) {
ccErrorNo = 2;
return false;
}

if (cards[cardType].checkdigit) {
var checksum = 0;
var mychar = “”;
var j = 1;

var calc;
for (i = cardNo.length – 1; i >= 0; i–) {

calc = Number(cardNo.charAt(i)) * j;

// If the result is in two digits add 1 to the checksum total
if (calc > 9) {
checksum = checksum + 1;
calc = calc – 10;
}

// Add the units element to the checksum total
checksum = checksum + calc;

// Switch the value of j
if (j ==1) {j = 2} else {j = 1};
}

// All done – if checksum is divisible by 10, it is a valid modulus 10.
// If not, report an error.
if (checksum % 10 != 0) {
ccErrorNo = 3;
return false;
}
}

// The following are the card-specific checks we undertake.
var LengthValid = false;
var PrefixValid = false;
var undefined;

// We use these for holding the valid lengths and prefixes of a card type
var prefix = new Array ();
var lengths = new Array ();

// Load an array with the valid prefixes for this card
prefix = cards[cardType].prefixes.split(“,”);

// Now see if any of them match what we have in the card number
for (i=0; i<prefix.length; i++) {
var exp = new RegExp (“^” + prefix[i]);
if (exp.test (cardNo)) PrefixValid = true;
}

// If it isn’t a valid prefix there’s no point at looking at the length
if (!PrefixValid) {
ccErrorNo = 3;
return false;
}

// See if the length is valid for this card
lengths = cards[cardType].length.split(“,”);
for (j=0; j<lengths.length; j++) {
if (cardNo.length == lengths[j]) LengthValid = true;
}

// See if all is OK by seeing if the length was valid. We only check the
// length if all else was hunky dory.
if (!LengthValid) {
ccErrorNo = 4;
return false;
};

return true;
}

[/CODE]

To call the function use the following script

[CODE]
<script type=”text/javascript”>
<!–
function testCreditCard () {
if (checkCreditCard (document.getElementById(‘CardNumber’).value,document.getElementById(‘CardType’).value)) {

}
else {alert (document.getElementById.style=inline (ccErrors[ccErrorNo]))};
}
//–>
</script>
[/CODE]

Also in #JavaScript _↴