Posts Tagged JavaScript

Validate your EAN barcode

Posted by smoreau in Html on 13 May 2010

On one of the applications I am working on, I had to validate an EAN (European Article Number) barcode.
This application is mostly using JavaScript validation so I asked my friend Google to find me a JavaScript method which would check my EAN barcode.
It found validators in different languages but none in JavaScript. 🙁

Because one is never better served than by oneself, I decided to write it myself and share it with you. 😉

function checkEan(eanCode) {
	// Check if only digits
	var ValidChars = "0123456789";
	for (i = 0; i < eanCode.length; i++) { 
		digit = eanCode.charAt(i); 
		if (ValidChars.indexOf(digit) == -1) {
			return false;
		}
	}
	
	// Add five 0 if the code has only 8 digits
	if (eanCode.length == 8 ) {
		eanCode = "00000" + eanCode;
	}
	// Check for 13 digits otherwise
	else if (eanCode.length != 13) {
		return false;
	}
	
	// Get the check number
	originalCheck = eanCode.substring(eanCode.length - 1);
	eanCode = eanCode.substring(0, eanCode.length - 1);
	
	// Add even numbers together
	even = Number(eanCode.charAt(1)) + 
	       Number(eanCode.charAt(3)) + 
	       Number(eanCode.charAt(5)) + 
	       Number(eanCode.charAt(7)) + 
	       Number(eanCode.charAt(9)) + 
	       Number(eanCode.charAt(11));
	// Multiply this result by 3
	even *= 3;
	
	// Add odd numbers together
	odd = Number(eanCode.charAt(0)) + 
	      Number(eanCode.charAt(2)) + 
	      Number(eanCode.charAt(4)) + 
	      Number(eanCode.charAt(6)) + 
	      Number(eanCode.charAt(8)) + 
	      Number(eanCode.charAt(10));
	
	// Add two totals together
	total = even + odd;
	
	// Calculate the checksum
    // Divide total by 10 and store the remainder
    checksum = total % 10;
    // If result is not 0 then take away 10
    if (checksum != 0) {
        checksum = 10 - checksum;
    }

	// Return the result
	if (checksum != originalCheck) {
		return false;
	}
	
    return true;
}

Note that this code can validate EAN-8 and EAN-13 barcodes.

,

8 Comments

Onclick event is not fired on IE

Posted by smoreau in Html on 08 Dec 2009

I am pretty sure everybody knows that Internet Explorer has “a few” bugs… 🙄
You didn’t? 😯 Alright, better to stay on your little cloud and leave this blog right away!

For the others, I will talk about the JavaScript event onclick which is not fired when the following requirements are matched:

  • In a form;
  • There is only ONE input text element;
  • There is one button which has an onclick event assigned;
  • You press the ‘Enter’ button inside the input text element.

For a better understanding, let’s now take the following example:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

As you can see, there is nothing difficult in this code.
Well, that doesn’t mean Internet Explorer can handle it… 😆

The bug occurs if you press the ‘Enter’ button inside the input text element using Internet Explorer. Indeed, the onclick event is not fired and the text ‘onclick fired!’ is not display to the user! However, it works perfectly fine on Firefox and Safari.

The funny thing is this code works on Internet Explorer if you add another input text, even if it is hidden!
Why? Don’t ask me! 😐

Anyway, the following example works on IE:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="text" style="display:none"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

Why are we assigning an onclick event to the submit button?
It could be for a lot of reasons, but the main one is probably to validate the form before submitting the data.

By the way, RichFaces is very often using this event on the submit buttons.
So remember to add a hidden input text to your form if you want to allow users to use the ‘Return’ key. 🙂

, , , , , ,

3 Comments

Be careful of SKIP_COMMENTS

Posted by smoreau in Tricks on 01 Dec 2009

In the early days, we used to hide JavaScript code from old browsers that do not support JavaScript.
The way of doing this was to put a one-line HTML-style comment without the closing characters immediately after the opening <script> tag and put //--> at the end of the script.

For example:

<script type="text/javascript">
<!--
alert('Test');
//-->
</script>

However if you are using this trick with the initialization parameter facelets.SKIP_COMMENTS set to true, the code between <!-- and //--> won’t even be sent to the client!
It simply means that the code above won’t open an alert window because it has been skipped during the page rendering.

Here is what the client will receive:

<script type="text/javascript">
<!--
//-->
</script>

You have two solutions to avoid this situation:

  1. Set the SKIP_COMMENTS parameter to false (the default is true). This can’t really hurt, your page will just be heavier depending on how much HTML comments you put on your page;
  2. No need to hide the JavaScript code as all browsers are now supporting it and over 99.9% of users have it enabled – this is the solution I chose.

For information, below is the code to put in your web.xml file to set the SKIP_COMMENTS parameter to false:

<context-param>
    <param-name>facelets.SKIP_COMMENTS</param-name>
    <param-value>false</param-value>
</context-param>

, , ,

No Comments