This SR is now closed. Posting the explanation and solution here for the greater community.

The true root cause of this behavior is not a Pega defect, but rather browser behavior exacerbated by an inconsistency with how browsers are interpreting the current HTML5 number input type standard. Allow me to elaborate.

Try this link out in Chrome vs. IE11: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Notice some key differences in Chrome and IE11:

In Chrome you can type 1 to many 'e's, but no other letters. Nothing visually happens on tab out.

In IE11, you can type any letters you want, including e's. However, once you tab out, it will wipe out the input if it is not a valid number.

This is exactly what is happening in your scenario in a Pega 7 app.

In Chrome, the value is blanked out when you submit the form, and hence your validate rule will not fire, because there is no value to even validate.

With IE11, you will see it more clearly, because on tab out or onblur you will see the wiping happen, and hence another null submission.

But all hope is not lost. We've come up with some custom JavaScript that can help achieve this requirement if you have it.

You can place the following code in your UserWorkForm. (This is an available HTML fragment you can save into your application ruleset)

What this code will do is loop over any number input fields and basically swallows any attempts to type anything other than digits. The current iteration of the code also accepts + or -, but you can easily extend the conditions to disallow these as well. Or if you want to enable or disable other keypresses, you can look up the corresponding key code and adjust accordingly.

<script>
// Code to allow only numbers in numeric input fields
$(document).ready(function() {
    // Getting all the input type number elements. Change this selector according to the requirement.
    var inputElements = document.querySelectorAll("input[type=number]");


    if (inputElements && inputElements.length > 0) {
        for (var index = 0, count = inputElements.length; index < count; index++) {
            inputElements[index].addEventListener("keypress", function (event) {
                event = event ? event : window.event;
                var keyCode = event.keyCode;
                // Allowing only number keys, arrow keys, delete, backspace, home, end, -, + keys
                // Note:  If any other keys are need to be allowed they should be added in if condition
                if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 35 && keyCode <= 40) || keyCode == 8 || keyCode == 45 || keyCode == 46 || keyCode == 61 || keyCode == 43 || keyCode == 189 || keyCode == 109) {
                    return true;
                } else {
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                }
            }, false);
        }
    }
});
</script>

Remember, this code is provided as is, and is just a proof of concept starting point. You are free to extend or modify it as you see fit