knockout.validation을 사용한 예제 웹 응용 프로그램이 있습니다. 필수 속성 - requiredText에 대한 메시지와 함께 툴팁을 표시해야합니다. html이 아닌 viewmodel에서 툴팁을 만들고 싶습니다.녹아웃 유효성 검사 및 툴팁 표시
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>
자바 스크립트 :
/// <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