녹아웃 유효성 검사 및 툴팁 표시

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

출처

2014-10-16 user2644776

HTML: 

<script src="Scripts/jquery-2.1.1.min.js"></script> 
<script src="Scripts/knockout-3.2.0.js"></script> 
<script src="Scripts/knockout.validation.js"></script> 
<link href="Content/bootstrap.min.css" rel="stylesheet" /> 
<script src="Scripts/bootstrap.min.js"></script> 
<script src="Scripts/ViewModel.js"></script> 

<style> 
    body { 
    font-family: Helvetica, Arial, sans-serif; 
    padding: 10px; 
    } 
    fieldset { 
     padding: 10px; 
     border: solid 1px #ccc; 
     width: 500px 
    } 
    label { 
     display: block; 
     width: 100%; 
     padding: 5px 
    } 
    .validationMessage { 
     color: Red; 
    } 
    .Warning { 
     border-color: red; 
    } 
    .customMessage { 
     color: Orange; 
    } 
    input { 
     border:1px solid #ccc 
    } 
</style> 

<div id="contain" class="container"> 
    <h2>Required field validation</h2> 
    <input data-bind="value: lastName, tooltip: isValidField" data-placement="below" data-title="Alert" data-content="We have identified this information is incorrect and must be updated." /> 
    <button type="button" data-bind='click: submit'>Submit</button> 
</div> 


JavaScript: 

ko.validation.rules.pattern.message = 'Invalid.'; 
ko.validation.configure({ 
    //decorateInputElement: true, 
    decorateElement: true, 
    registerExtenders: true, 
    messagesOnModified: false, 
    insertMessages: false, 
    parseInputAttributes: true, 
    messageTemplate: null, 
    errorClass: 'Warning' 
    //  errorAsTitle: true 
}); 

var ViewModel = function() { 
    var self = this; 
    self.lastName = ko.observable().extend({ required: true }); 
    self.isValidField = ko.observable(); 
    this.submit = function() { 
     if (self.errors().length === 0) { 
      alert('Thank you.'); 
     } else { 
      self.errors.showAllMessages(); 
      self.isValidField(self.lastName.isValid()); 
     } 
    }; 
    self.errors = ko.validation.group(self); 
}; 

ko.bindingHandlers.popover = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), 
      valueUnwrap = ko.unwrap(value), 
      allBindings = allBindingsAccessor(), 
      isValid = allBindings.value; 
     if (isValid) { 
      $(element).popover({ 
       trigger: "hover" 
      }); 
     } else { 
      $(element).popover("hide"); 
     } 
    }, 

    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = valueAccessor(), 
      valueUnwrap = ko.unwrap(value), 
      allBindings = allBindingsAccessor(), 
      isValid = allBindings.value; 
     if (isValid) { 
      $(element).popover({ 
       trigger: "hover" 
      }); 
     } else { 
      $(element).popover("hide"); 
     } 
    } 
}; 

ko.bindingHandlers.tooltip = { 
    init: function(element, valueAccessor) { 
     var local = ko.utils.unwrapObservable(valueAccessor()), 
      options = {}; 

     ko.utils.extend(options, ko.bindingHandlers.tooltip.options); 
     ko.utils.extend(options, local); 

     $(element).tooltip(options); 

     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).tooltip("destroy"); 
     }); 
    }, 
    options: { 
     placement: "right", 
     trigger: "hover" 
    } 
}; 

$(document).ready(function() { 
    ko.applyBindings(new ViewModel()); 
});

출처

2014-10-16 10:02:23 zrabzdn

당신은 extenders on observables는 검증의이 종류를 구현하는 데 사용할 수 있습니다. 여기에 녹아웃 문서에서 연장 코드를 사용하여 샘플 구현의, 단지 작업 데모를 볼 수 "실행 코드"하십시오

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>

출처

2014-10-16 07:36:24 Tanner

ko.validation의 속성은 "insertMessages"입니다.

defalut에 의해 true = 요소 근처의 스팬에 오류가 있음을 표시합니다. 툴팁에 표시되는 오류 메시지는 다음과 같이 'false'로 설정됩니다.

ko.validation.init{ 
    insertMessages: false 
}

출처

2016-01-06 14:59:40 WantToDo

녹아웃 유효성 검사 및 툴팁 표시

답변

관련 문제