CODEWITHSUNDEEP
knockout.jsknockout-validation
Bumble
Bumble

Reputation: 557

Knockout validation plugin - isValid( ) always returns true

I am using knockout-validation , when try to check the isValid property it is always true. any advice is much appreaciated.

my html markup

<div class="login">
        <h1>
            Customer login</h1>
        <form action="/Home/login" method="post">
        <div class="fontStyle">
            <fieldset>
                <legend></legend>
                <div>
                    <label for="User-id">
                        User Id</label>
                    <input id="User-id" name="username" data-bind='value:UserName, valueUpdate: "afterkeydown"'  type="text" value=""/>
                    <span data-bind='visible: UserName.hasError, text: UserName.validationMessage'> </span>
                </div>
                <div>
                    <label for="Password">
                        Password</label>
                    <input id="Password" name="password" data-bind='value:Password, valueUpdate: "afterkeydown"'  type="password" value="" />
                    <span data-bind='visible: Password.hasError, text: Password.validationMessage'> </span>
                </div>
                <div>
                    <label>
                        &nbsp;</label>
                    <input type="submit" data-bind='click:submit' class="button" value="Login" />
                </div>
            </fieldset>
        </div>

my javascript code block is 



    var loginModule = (function () {
    $(document).ready(function () {

        var userName = $('input:text[name=username]').val();
        var password = $('input:text[name=password]').val();
        ko.applyBindings(new viewmodel(userName, password));

    });

    ko.validation.registerExtenders();
    var viewmodel = function (username, password) {
        var that = this;
        that.UserName = ko.observable(username).extend({ required: "User Id required", minLength: 5, maxLength: 10 });
        that.Password = ko.observable(password).extend({ required: "Password required" });

        that.valid = ko.validatedObservable(that);
        that.submit = function () {

        //trying to check user name is valid or not
            alert(that.UserName.isValid());

        };
    };

    return {
        viewmodel: viewmodel
    }
})();

when user clicks submit button i want to validate by checking isValid() method.

Upvotes: 2

Views: 4511

Answers (1)

nemesv
nemesv

Reputation: 139758

You need call the ko.validation.registerExtenders(); before using any of validation ko.validation provided extenders.

So move this line before creating your viewmodel:

$(document).ready(function () {
    var userName = $('input:text[name=username]').val();
    var password = $('input:text[name=password]').val();
    ko.validation.registerExtenders();
    ko.applyBindings(new viewmodel(userName, password));

});

Demo JSFiddle.

However if you are using the latest version of the validation plugin from GitHub then you don't need to call ko.validation.registerExtenders(); any more: Demo.

Upvotes: 3

Related Questions