Apply Validations Using KnokcoutJS in ASP.Net Application

Introduction

In today's article I will tell you how to apply Validations using KnokcoutJS in an ASP.NET Application, Part 1.

We often use JavaScript Validations in our application, but if we are working with KnockoutJS then why not apply Validations using Knockout only?

This article will help you to put two types of Validations in your application. The first validation is to not allow a null value and the second is to not allow a value other than a number.

Let's see the procedure required to create such an application.

Step 1

First of all you need to add am external Knockout js file into your application, you can either download it from this link: "KnockoutJS" or can download my application available at the beginning of this article in Zip Format and then use the file attached with this Zip file.

After downloading the file you need to call it in the head section of your application as in the following:

</head>

Step 2

Now we can work on our application. First we will work on the ViewModel; for this you need to add a Script tag under the Body Section and then need add this code:

function x() {

this.getFocused = ko.observable();

this.text = ko.observable();

this.setFocus= function () {;

if (this.text().length == 0) {

this.getFocused(true);

alert("Provide Your Name");

}

else {

this.getFocused(false)

}

this.Number = ko.observable(123);

this.NotaNumber = ko.observable(true);

this.attemptedValue = ko.computed({

read: this.Number,

write: function (value) {

if (isNaN(value))

this.NotaNumber(false);

else {

this.NotaNumber(true);

this.Number(value);

}

owner: this

});

};

ko.applyBindings(new x());

</script>

As always I first created a function "x()", you can divide this function into two parts, one for the first validation that is "not allowing null value" and the second for the second validation that is "allowing only numbers".

For the first part I created two Observables named "getFocused" and "text". Then I created a function named "setFocus". In that function I checked the length of the text() observable, if the length is found to be 0 then the TextBox will get the focus and an alert box will popup that will ask you to enter some value into the TextBox.

In the second half I again created two Observables named Number and NotaNumber. Then I took a Computed Property in which read and write are used. Read will read the value of Number and in the Write a function is created that will check the value to be a Number or Not a Number, if it is found that the value entered is not a number then the "NotaNumber" Observable will be activated otherwise it will remain in the Inactivated state.

At the end I applied the binding to the function x().

Our work on the View Model is now complete so now we can move towards the View of our application.

Step 3

In the View Part or the design part, write the following code:

<div>

<p>Enter Your Salary: <input data-bind="value: attemptedValue"/><label style="color:red" data-bind="visible: !NotaNumber()">Please Provide Numeric Value!</label></p>

<button data-bind="click: setFocus">Submit</button>

<br />

</div>

Here I took two Textboxes, the first TextBox is bound to the text() and will get the focus if found to be empty and the second TextBox is bound to the attemtedValue. If this second TextBox is found empty then a Label bound to the NotaNumber will be shown with an error message.

Then I took a button bound to the setFocus. This means that the setFocus function will be activated on the click of this button.

At the end a Label is used that is again bound to the text so it will show the value of the TextBox at run time.

The complete code of this application is as follows:

</head>

<body>

<div>

<p>Enter Your Salary: <input data-bind="value: attemptedValue"/><label style="color:red" data-bind="visible: !NotaNumber()">Please Provide Numeric Value!</label></p>

<button data-bind="click: setFocus">Submit</button>

<br />

</div>

function x() {

this.getFocused = ko.observable();

this.text = ko.observable();

this.setFocus= function () {;

if (this.text().length == 0) {

this.getFocused(true);

alert("Provide Your Name");

}

else {

this.getFocused(false)

}

this.Number = ko.observable(123);

this.NotaNumber = ko.observable(true);

this.attemptedValue = ko.computed({

read: this.Number,

write: function (value) {

if (isNaN(value))

this.NotaNumber(false);

else {

this.NotaNumber(true);

this.Number(value);

}

owner: this

});

};

ko.applyBindings(new x());

</script>

</form>

</body>

</html>

Output

Now your application is ready to be debugged.

On running the code you will get output like this:

validations using knockout

You can see that the Salary TextBox is holding some value, that value was provided through the code. Right now every thing is in it's default state.

Now I am providing my name in the first TextBox and will click on the button.

validations using knockout

Nothing wrong happened because I provided my name in the first TextBox and the second TextBox is also holding a numeric value that was it's default value. But now I will add a value after this numeric value that will not be numeric and will again click on the button.

validations using knockout

You can see that an error message is provided in front of the second TextBox that is asking to provide only a Numeric value.

After this I also removed my name from the TextBox one and will again click on the button.

validations using knockout

You can see that an alert box is provided that is asking for some value in the TextBox 1. As you click on the "Ok" button of TextBox then TextBox 1 will automatically get the focus.