Validation in knockout js input fields

Question

I created some input fields using KnockoutJS, and now I want to validate them.

http://jsfiddle.net/sohimohit/43zkoszu/12/

I tried it using validation plugin but it doesn't work. I added that plugin and used it as mentioned but didn't get the solution. When you click on "add field" a form appears; I want to make the name field required and branch id as numeric. However, when I click on "add fields" it doesn't get added until the form is validated.

How can I achieve this?

Your Fiddle features over 400 lines of JavaScript (not exactly a compact reproduction) but there isn't a single line of Knockout Validation in there (at least you don't use any extend on your observables to add validation rules). Seems like you're asking us to do your coding for you. — Sanne Roerdinkholder
– Sanne Roerdinkholder, Commented Aug 20, 2014 at 9:10
I tried it but my code stop working that is why i remove validation part from my code — user2142786
– user2142786, Commented Aug 20, 2014 at 9:16
Right now it's too broad. Don't expect anyone to provide you with a full implementation. Try to implement it yourself, and when you run into an issue, you'll be able to ask a more specific question. And usually those specific questions are already asked (and answered!) by someone before. — Sanne Roerdinkholder
– Sanne Roerdinkholder, Commented Aug 20, 2014 at 9:18

Muhammad Raheel · Accepted Answer · 2014-08-20 09:18:17Z

2

You are not doing validation properly. I recommend this method

Set some settings

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error-element',
    errorClass: 'error-element',
    errorsAsTitle: true,
    parseInputAttributes: false,
    messagesOnModified: true,
    decorateElementOnModified: true,
    decorateInputElement: true
});

Make inputs bind with validationElement

<input type="text" placeholder="Name" data-bind="value:name,validationElement:name">    
<input type="text" placeholder="Branch" data-bind="value:branch,validationElement:branch">

Extend observables

self.name = ko.observable().extend({required:true})
self.branch = ko.observable().extend({required:true,digit: true})

Now apply the rule. I prefer group

var data = [
    self.name,
    self.branch
]

self.Errors = ko.validation.group(data);

Now on add button wrap your code

self.Add = function(){
    if(self.Errors.length == 0){
        .
        .
        .
        //Your code here
    }else{
        self.Errors.showAllMessages()
    }
}

Hope it helps

answered Aug 20, 2014 at 9:18

Muhammad Raheel

19.9k7 gold badges69 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Muhammad Raheel Over a year ago

are you even including knockout.js?

user2142786 Over a year ago

Yes i am including it. on fiddle there is no error here is link jsfiddle.net/sohimohit/43zkoszu/11 but still the data get submit without validation.

user2142786 Over a year ago

jsfiddle.net/sohimohit/43zkoszu/12 i didn't enter the word still it is passing. I put an alert if error length is zero and it is showing it if i don't enter the word in name field

Muhammad Raheel Over a year ago

you are defining self.Error outside the view model that is the problem

user2142786 Over a year ago

if you look into latest fiddle i.e jsfiddle.net/sohimohit/43zkoszu/12 i define it inside viewmodel.

|

Collectives™ on Stack Overflow

Validation in knockout js input fields

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related