Progress bar not working with Kendo Numeric Text Box - kendo-ui

Question

I have tried to implement a progress bar in my application. When I used a numeric text box the progress bar is not progressing forward. How to make it progress using a numeric text box. Thanks.
<form name="ContactInforForm" action="ContactInformation.html" onsubmit="return ValidateRequiredFields()" method="post">
<div>
<table class="forms" style="padding-left:9em">
<tr>
<td>
<h4>Profile Completeness: <span id="completed">20%</span></h4>
</td>
<td>
<div id="profileCompleteness"></div>
</td>
</tr>
<tr>
<td>
Employee Name:
</td>
<td>
<input type="text" name="FName" id="txtFname" />
</td>
</tr>
<tr>
<td>
Employee Id:
</td>
<td>
<input type="text" name="EmpID" id="txtEmpID" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<input type="text" name="Age" id="txtAge" />
</td>
</tr>
<tr>
<td>
Contact Phone:
</td>
<td>
<input type="text" name="PrimaryPhone" id="txtPriPhone" />
</td>
<td><span id="PPhoneValidationMsg" style="color:red; font-size:smaller; font-weight:bold; "></span></td>
</tr>
<tr>
<td>
<button style="width:75px;" type="button" id="btnNext" onclick="ValidateRequiredFields();">Submit</button>
</td>
</tr>
</table>
</div>
</form>
<!--Make all the controls into kendo -->
<script>
$(document).ready(function() {
$("#txtFname").kendoMaskedTextBox({
});
$('#txtEmpID').kendoNumericTextBox({
});
$('#txtAge').kendoNumericTextBox({
});
$('#txtDob').kendoDatePicker({
});
$('#txtDesig').kendoMaskedTextBox({});
$('#txtAdd1').kendoMaskedTextBox({
});
$('#txtAdd2').kendoMaskedTextBox({
});
$('#drpStates').kendoDropDownList({
});
$('#drpCountry').kendoDropDownList({
});
$("#txtPriPhone").kendoMaskedTextBox({
mask: "[phone]"
});
$("#btnNext").kendoButton();
var pb = $("#profileCompleteness").kendoProgressBar({
type: "chunk",
chunkCount: 10,
min: 0,
max: 10,
value: 2
}).data("kendoProgressBar");
$(".forms input").change(function() {
var completeness = 2;
$(".forms input").each(function() {
if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
});
</script>
When I changed the kendo numeric text box to masked text box the code seems to work fine. But for my requirement I require numeric textbox.

Answer 1

The default value of a numeric textbox may not be "". Try something like this:
$(".forms input").change(function () {
var completeness = 2;
$(".forms input").each(function () {
if (this.hasClass("k-numerictextbox") && this.value != "0" && this.value != "") {
completeness++;
} else if (this.value != "") {
completeness++;
}
});
pb.value(completeness);
$("#completed").text((completeness * 10) + "%");
});
Would be pretty easy to set a break point and see what an empty numeric textbox looks like.