how to use knockout validation

Question

I am following this link to create validations.

But i dont understand how can i use this extend method in my code.

I load data into my observable with records coming from calling breeze query.

I load data in below manner

dataObsArray= ko.observableArray()

datacontext.getData(id,dataObsArray)
                   .then(function () {

          // some logic


 })
        .fail("Data not found");

Then i bind this obs array to my view as below

<tbody data-bind="with: dataObsArraay">
            <tr>
                <td>name</td>
                <td> <input data-bind="  value: Name" ></td>
                <td> <input data-bind="  value: Age" ></td>

            </tr>
</tbody>

So i dont understand how can i use extend method because i am just using binding my view with properties in my observable array.

Please guide me.

well in you view model do you have a function with entities i.e name , age etc . if there you need to use `.extend({//logic here})` . — super cool, Dec 03 '14 at 15:05
i can help you posting some answer with knockout way but i ain't have no clue about breeze — super cool, Dec 03 '14 at 15:06

Jeremy Danyow · Answer 1 · 2014-12-04T16:29:33.870

1

Consider using breeze validation instead of putting the validation logic in the UI code via a knockout extender. Using breeze validation will ensure the rules are always evaluated and will save you from creating an extra model over your entity for the purposes of validation.

here's an example using one of breeze's built in validators: the stringLength validator.

var entityType = entityManager.metadataStore.getEntityType('????'),
    nameProperty = entityType.getProperty('Name'),
    nameLengthValidator = breeze.Validator.stringLength({ maxLength: 10, minLength: 2 });
nameProperty.validators.push(nameLengthValidator);

here's an example of a custom required validator for strings that doesn't allow whitespace-only values:

// make a reusable validator
var myRequiredValidator = breeze.Validator.makeRegExpValidator(
    "myRequiredValidator",  
    /\S/,  
    "The %displayName% '%value%' cannot be blank or entirely whitespace");

// register it with the breeze Validator class.
breeze.Validator.register(myRequiredValidator);

// add the validator to the Name property...
var entityType = entityManager.metadataStore.getEntityType('????'),
    nameProperty = entityType.getProperty('Name');
nameProperty.validators.push(nameLengthValidator);

here's the documentation for making regex validators.

You can also write custom validators- check the breeze docs for more info on that- look for the Write a custom validator section.

edited Dec 04 '14 at 16:29

answered Dec 03 '14 at 17:08

Jeremy Danyow

26,470
12
87
133

What kind of validation i use if i use space in my inputbox? I put [Required] attribute on my entity but when i try to save i get entityAspect.hasValidationErrors as false.. I dont want user to only blank spaces – James Dec 04 '14 at 15:41
http://stackoverflow.com/questions/23478929/how-to-make-the-breezejs-required-validator-allow-empty-strings – Jeremy Danyow Dec 04 '14 at 15:43
i dont want to allow just spaces in my string.. i also tried this on my entities [Required(AllowEmptyStrings = false)] – James Dec 04 '14 at 16:10
i am trying to put it on my entity directly. like this [Required] [Column(TitleCol, TypeName = "varchar")] [MaxLength(1000)] public virtual string Description { get; set; } – James Dec 04 '14 at 16:37
In other words, you want breeze to respect the .NET data annotations related to validation. It does in some cases, in others you need to supplement the breeze metadata and add your own custom validations. Check out this question for more info on that: http://stackoverflow.com/q/26570638/725866 – Jeremy Danyow Dec 04 '14 at 16:42

score 0 · Answer 2 · answered Dec 03 '14 at 16:10

you'll need to create a model for your data, e.g.:

function person(name, age) {
    this.name = ko.observable(name).extend({ minLength: 2, maxLength: 10 });
    this.age = ko.observable(age).extend({ min: 18, max: 99 });
}

var data = [],
    people = ko.observableArray();

datacontext.getData(id, data)
    .then(function (data) {
        for (i = 0; i < data.length; i++) {
            people.push(new person(data.Name, data.Age));
        }
    })
    .fail("Data not found");


<tbody data-bind="foreach: people">
    <tr>
        <td>name</td>
        <td> <input data-bind="  value: name" ></td>
        <td> <input data-bind="  value: age" ></td>
    </tr>
</tbody>

how to use knockout validation

2 Answers2