Отслеживайте изменение значения входа в нокауте js - PullRequest
Новая
       27

Отслеживайте изменение значения входа в нокауте js

0 голосов
/ 20 февраля 2019

В моем приложении Knockout.js я хочу проверить ввод пользователя.Я использовал пользовательскую проверку

Ниже приведен код, который я использовал для циклического прохождения каждого элемента в массиве. 

result.Settings.filter(function (element) {
    element.DisplayMobile = ko.observable(element.PointsForMobile).extend({ required: { message: 'This field cannot be empty' }, useNumberFloatOnly: "abc", maximumValue: 'abc'});
    element.DisplayWeb = ko.observable(element.PointsForWeb).extend({ required: { message: 'This field cannot be empty' }, useNumberFloatOnly: "abc", maximumValue: 'abc'});

    element.Error = ko.observable(false);
});

ниже приведен ввод в представлении 

<input type="number" data-bind="value:$data.DisplayWeb,valueUpdate: ['afterkeydown', 'input'],,change:TestValidPoint" class="positiveno" min="0" />
<input type="number" data-bind="value:$data.DisplayMobile,valueUpdate: ['afterkeydown', 'input']" class="positiveno" min="0" />

ниже указан валидатор useNumberFloatOnly, который работает для меня. 

ko.validation.rules['useNumberFloatOnly'] = {
            validator: function (val, othervalue) {
                var numStr = /^\d*[0-9]\d*$/;

                if (othervalue === "abc") {
                    Settings().filter(function (element) {
                        if (element.DisplayMobile() == "" || element.DisplayWeb() == "") {
                            element.Error(true);

                        }
                        if ((element.DisplayMobile() == val || element.DisplayWeb() == val ) && !numStr.test(val)) {
                            element.Error(true);

                        }
                        else if ((element.DisplayMobile() == val || element.DisplayWeb() == val) && numStr.test(val)) {
                            element.Error(false);
                        }
                    });
                }
                return numStr.test(val);
            },
            message: 'Enter only positive values.Decimals not allowed'
        };

при нажатии кнопки сохранения, я хочу проверить, нет ли ошибок в каком-либо из полей.две проблемы, с которыми я сталкиваюсь

1) Как отследить изменения входного значения?какое событие использовать для этого?это для отслеживания, если на входе есть ошибка, и если я могу отключить кнопку сохранения.

2) Второе, что я попробовал, это событие нажатия кнопки сохранения при циклическом прохождении массива: Ошибка observable всегда ложно, хотя в валидаторе я устанавливаю значение true.

Пожалуйста, укажите

Спасибо

1 Ответ

0 голосов
/ 20 февраля 2019

Вы можете создать errorGroup для всех observable с, для которых требуется проверка.Затем используйте errorGroup.isValid() для условного enable кнопки 

const viewModel = function() {
  this.DisplayMobile = ko.observable().extend({ required: true });
  this.DisplayWeb = ko.observable().extend({ required: true });
  
  this.submit = function() {
    if (this.errorGroup.isValid()) {
      alert('submitted');
    } else {
      this.errorGroup.errors.showAllMessages();
    }
  };

  this.errorGroup = ko.validatedObservable({
    DisplayMobile: this.DisplayMobile,
    DisplayWeb: this.DisplayWeb
  });
  
};

ko.applyBindings(new viewModel());
.validationMessage{
  color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<fieldset>
  <legend>Details</legend>
  <label>Display Mobile: <input data-bind='value: DisplayMobile' /> </label><br>
  <label>Display Web: <input data-bind='value: DisplayWeb' /> </label>
</fieldset>

<br>
<button type="button" data-bind='click: submit, enable: errorGroup.isValid()'>Submit</button>
<br>
<br> Error count: <span data-bind='text: errorGroup.errors().length'></span>

Другой аналогичный подход заключается в использовании группы проверки: 

 this.errors = ko.validation.group(this):


const viewModel = function() {
  this.DisplayMobile = ko.observable().extend({ required: true });
  this.DisplayWeb = ko.observable().extend({ required: true });
  
  this.submit = function() {
    if (this.errors().length === 0) {
      alert('submitted');
    } else {
      this.errors.showAllMessages();
    }
  };

  this.errors = ko.validation.group(this);
};

ko.applyBindings(new viewModel());
.validationMessage{
  color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

<fieldset>
  <legend>Details</legend>
  <label>Display Mobile: <input data-bind='value: DisplayMobile' /> </label><br>
  <label>Display Web: <input data-bind='value: DisplayWeb' /> </label>
</fieldset>

<br>
<button type="button" data-bind='click: submit, enable: errors().length === 0'>Submit</button>
<br>
<br> Error count: <span data-bind='text: errors().length'></span>
...