проверка нокаута и отображение всплывающей подсказки

У меня есть пример веб-приложения с Knockout.validation. Мне нужно показать всплывающую подсказку с сообщением для требуемого свойства - requiredText. Я хочу создать всплывающую подсказку в модели просмотра, а не в html, но не могу?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>ko.validation.test</title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <h2>Required field validation</h2>
        <div class="bs-docs-example">
            <form>
                <fieldset>
                    <div class="control-group" data-bind="validationElement: requiredText">
                        <label>Example 1 required</label>
                        <div class="input-append">
                            <input type="text" data-bind="value: requiredText" />
                            <button class="btn" data-bind="click: validateExample1Clicked">Validate</button>
                        </div>
                        <span class="label label-success" data-bind="visible: showExample1Success">Example 1 is valid</span>
                        <span class="label label-important" data-bind="visible: showExample1Failed">Example 1 is not valid</span>
                        <span class="help-inline" data-bind="validationMessage: requiredText"></span>
                    </div>
                    <div class="control-group" data-bind="validationElement: requiredTextUsingAttributes">
                        <label>Example 2 required attribute</label>
                        <div class="input-append">
                            <input type="text" data-bind="value: requiredTextUsingAttributes" required />
                            <button class="btn" data-bind="click: validateExample2Clicked">Validate</button>
                        </div>
                        <span class="label label-success" data-bind="visible: showExample2Success">Example 2 is valid</span>
                        <span class="label label-important" data-bind="visible: showExample2Failed">Example 2 is not valid</span>
                        <span class="help-inline" data-bind="validationMessage: requiredTextUsingAttributes"></span>
                    </div>
                    <div class="control-group">
                        <label>Optional</label>
                        <input type="text" data-bind="value: optionalText" />
                    </div>
                    <div class="form-actions">
                        <button class="btn btn-primary" data-bind="click: validateAllClicked">Validate all</button>
                    </div>
                    <div class="alert alert-error" data-bind="visible: showValidationErrors">
                        <strong>Not valid</strong> All the fields in the form are not valid.
                    </div>
                    <div class="alert alert-success" data-bind="visible: showValidationSuccess">
                        <strong>Valid</strong> All the fields are valid.
                    </div>
                    <div class="alert alert-info" data-bind="visible: errors().length > 0">
                        <strong>Form is not valid</strong> The form has following errors:
                        <ul data-bind="foreach: errors">
                            <li data-bind="text: $data"></li>
                        </ul>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script src="Scripts/knockout-3.2.0.js"></script>
    <script src="Scripts/knockout.validation.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="ts/TestViewModel.js"></script>
</body>
</html>

JavaScript:

/// <reference path="../scripts/typings/knockout/knockout.d.ts" />
/// <reference path="../scripts/typings/knockout.validation/knockout.validation.d.ts" />
/// <reference path="../scripts/typings/bootstrap/bootstrap.d.ts" />
var TestViewModel = (function () {
    function TestViewModel() {
        var _this = this;

        this.requiredText = ko.observable().extend({ required: true });

        this.optionalText = ko.observable();

        this.requiredTextUsingAttributes = ko.observable();

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

        this.showValidationErrors = ko.observable(false);
        this.showValidationSuccess = ko.observable(false);
        this.showExample1Success = ko.observable(false);
        this.showExample2Success = ko.observable(false);
        this.showExample1Failed = ko.observable(false);
        this.showExample2Failed = ko.observable(false);

        this.validateExample1Clicked = function () {
            if (!ko.validation.validateObservable(_this.requiredText)) {
                alert("rrrrrr");
// Create tooltip 
        };

        this.validateExample2Clicked = function () {
            if (ko.validation.validateObservable(_this.requiredTextUsingAttributes)) {
                _this.showExample2Success(true);
                _this.showExample2Failed(false);
            } else {
                _this.showExample2Success(false);
                _this.showExample2Failed(true);
            }
        };

        this.validateAllClicked = function () {
            if (_this.errors().length == 0) {
                _this.showValidationSuccess(true);
                _this.showValidationErrors(false);
            } else {
                _this.showValidationSuccess(false);
                _this.showValidationErrors(true);
            }
        };
    }
    return TestViewModel;
})();


ko.validation.init({
    parseInputAttributes: true,

    decorateElement: true,

    errorElementClass: 'error'
});

ko.applyBindings(new TestViewModel());
//# sourceMappingURL=TestViewModel.js.map

javascript knockout.js knockout-validation
person user2644776    schedule 16.10.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать расширители наблюдаемых объектов для реализации такого рода проверки. Вот пример реализации с использованием кода расширения из документации Knockout. Просто нажмите "Выполнить фрагмент кода", чтобы увидеть работающую демонстрацию:

JS и HTML:

ko.extenders.required = function(target, overrideMessage) {
  //add some sub-observables to our observable
  target.hasError = ko.observable();
  target.validationMessage = ko.observable();

  //define a function to do validation
  function validate(newValue) {
    target.hasError(newValue ? false : true);
    target.validationMessage(newValue ? "" : overrideMessage || "This field is required");
  }

  //initial validation
  validate(target());

  //validate whenever the value changes
  target.subscribe(validate);

  //return the original observable
  return target;
};

function TestViewModel() {
  var self = this;
  self.name = ko.observable('').extend({ required: "Required" });
}


ko.applyBindings(new TestViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<label for="name">Name:</label>
<p data-bind="css: { error: name.hasError }">
  <input data-bind='value: name, valueUpdate: "afterkeydown"' />
  <span data-bind='visible: name.hasError, text: name.validationMessage'> </span>
</p>

person Tanner    schedule 16.10.2014

arrow_upward
0
arrow_downward

ko.validation имеет свойство: "insertMessages".

по умолчанию верно = показывать ошибку в диапазоне рядом с элементом. для отображения сообщения об ошибке в всплывающей подсказке установите значение «false» следующим образом:

ko.validation.init{
    insertMessages: false
}
person WantToDo    schedule 06.01.2016