ブートストラップ・ツイッター3.0とknockoutjs検証

Question

Twitterで検証クラスをブートストラップします。 has-errorまたはhas-warningは、入力要素とそのラベルをスタイルするために、ラップform-group要素に配置する必要があります。しかしKnockout-Validationはクラスを入力要素に追加します。

<div class="form-group has-error"> 
    <label class="control-label">Input with error</label> 
    <input type="text" class="form-control"> 
</div> 

それはdivなくinputにクラスを追加する方法でノックアウト・検証を設定することは可能ですか？

Answer 1

thebringkingさんの回答はあなたをそこに逃がすことはありません。 errorMessageClassとdecorateInputElementオプションも指定する必要があります。

ko.validation.init({ 
 
    errorElementClass: 'has-error', 
 
    errorMessageClass: 'help-block', 
 
    decorateInputElement: true 
 
}); 
 

 
var viewModel = ko.validatedObservable({ 
 
    name: ko.observable().extend({ 
 
    required: true 
 
    }), 
 
    email: ko.observable().extend({ 
 
    required: true, 
 
    email: true 
 
    }), 
 
    submit: function() { 
 

 
    if (!this.isValid()) { 
 
     this.errors.showAllMessages(); 
 
    } else { 
 
     alert('good job'); 
 
    } 
 
    } 
 
}); 
 

 
ko.applyBindings(viewModel);

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="container"> 
 
    <form class="form-horizontal"> 
 
    <div class="form-group" data-bind="validationElement: name"> 
 
     <label class="control-label col-xs-2" for="name">Name</label> 
 
     <div class="col-xs-10"> 
 
     <input id="name" class="form-control" type="text" data-bind="textInput: name" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" data-bind="validationElement: email"> 
 
     <label class="control-label col-xs-2" for="email">Email</label> 
 
     <div class="col-xs-10"> 
 
     <input id="email" class="form-control" type="text" data-bind="textInput: email" /> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="col-xs-offset-2 col-xs-10"> 
 
     <button type="submit" class="btn btn-primary" data-bind="click: submit">Submit</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 

 

 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

Answer 2

あなたは、ブートストラップ、フォーム上の「validationElement」結合ハンドラを使用するには、

<div class="form-group" data-bind="validationElement: someObservable"> 
    <label class="control-label" for="inputSuccess">Input with success</label> 
    <input type="text" class="form-control" id="inputSuccess"> 
</div> 

は、その後、あなたが「持っているエラー」のブートストラップエラークラスを使用するためにノックアウトの検証プラグインのconfigurationを設定しますdiv-。

ko.validation.init({errorElementClass:'has-error'}) 

これは私がツールで行う方法です。

Answer 3

あなたはこのようにノックアウト検証コアを拡張することができます：

var init = ko.bindingHandlers['validationCore'].init; 
ko.bindingHandlers['validationCore'].init = function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
    var config = ko.validation.utils.getConfigOptions(element); 
    // if requested, add binding to decorate element 
    if (config.decorateInputElement && ko.validation.utils.isValidatable(valueAccessor())) { 
     var parent = $(element).parents(".form-group"); 
     if (parent.length) { 
      ko.applyBindingsToNode(parent[0], { validationElement: valueAccessor() }); 
     } 
    } 
}; 

このコードは、親フォーム・グループは入力と同じクラスで飾られます。