Using Blend to Design HTML5 video series

View demonstrations on how to create a lightweight, dynamic version of the Memory Game in Blend using CSS3, HTML5, and JavaScript

http://channel9.msdn.com/Blogs/How-Do-I/How-Do-I-Part-1-Using-Blend-to-Design-HTML5-Windows-8-Apps-Creating-and-Defining-Style-Rules 

Cheers
Samitja

javascript for validating numeric with two decimal points

As I have stated in one of my previous posts , here is the javascript for validating texbox which accepts only numbers and two decimal points. The number will be automatically formatted when it loose the focus. There are plenty of third party tools that provide numeric text boxes that can achieve the similar tasks. I hope this will give some consolation for those who can't afford buying them.

<script type="text/javascript" language="javascript">
    function format(n, sep, decimals) {
        if (n == '') {
            document.getElementById('ctl00_ContentPlaceHolder1_txtBuyAmt').value = "0.00";        
            return 0.00;
        }
        if (isNaN(replaceSubstring(n, ',', ''))) {
            document.getElementById('ctl00_ContentPlaceHolder1_txtBuyAmt').value = "0.00";
            return 0.00;
        }
       
        var buyAmt = replaceSubstring(document.getElementById('ctl00_ContentPlaceHolder1_txtBuyAmt').value, ',', '');
        n = parseFloat(buyAmt);
        sep = sep || "."; // Default to period as decimal separator
        decimals = decimals || 2; // Default to 2 decimals

        return n.toLocaleString().split(sep)[0]
        + sep
        + n.toFixed(decimals).split(sep)[1];
    }
    function replaceSubstring(inSource, inToReplace, inReplaceWith) {

        var outString = inSource;
        while (true) {
            var idx = outString.indexOf(inToReplace);
            if (idx == -1) {
                break;
            }
            outString = outString.substring(0, idx) + inReplaceWith +
      outString.substring(idx + inToReplace.length);
        }
        return outString;

    }
   

    function validateOnlyNumber(evt) {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);

        if (key == '.') {
            if (document.getElementById('ctl00_ContentPlaceHolder1_txtBuyAmt').value.indexOf(key) > 0) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault) theEvent.preventDefault();

            }
        }

        if (document.getElementById('ctl00_ContentPlaceHolder1_txtBuyAmt').value == '' && key != '.') {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) theEvent.preventDefault();
        }
        var regex = /[0-9]|\./;
        if (!regex.test(key)) {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) theEvent.preventDefault();
        }
    }

    function checkNumbers() {

        var ValidChars = /[0-9]|\./;

        var pasteData = window.clipboardData.getData("Text");

        if (ValidChars.test(pasteData))

            return true;

        else {

            return false;

        }

    }
</script>

call the javascipts as follows
 <asp:TextBox ID="txtBuyAmt" runat="server" Width="200px"  onpaste="return checkNumbers()"   onblur="this.value=format(this.value);"  onkeypress='validateOnlyNumber(event)' >0.00</asp:TextBox>

Note: Here I have placed the text box inside a  contentplaceholder.


Cheers
Samitha