Bootstrap input-group-addon durandal knockout validation

我有一個字段來驗證和淘汰賽處理這個元素的驗證。接下來，我有一個input-group-addon，當knockout的驗證啓動時越界。我一直在嘗試尋找修復程序，但找不到解決此問題的另一個修復程序。Bootstrap input-group-addon durandal knockout validation

問題：

The issue

代碼本身是非常簡單的，說實話：

<div class="form-group" data-bind="validationElement: emailRepeated"> 
 
    <label for="emailRepeated" data-bind="text: translate('EmailConfirm')">[Confirm your Email Address]</label> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon">@</span> 
 
     <input type="email" class="form-control" id="emailRepeated" data-bind="value: emailRepeated" > 
 
    </div> 
 
</div>

我的淘汰賽只是有擴展，像這樣：

self.emailRepeated.extend({ required: true, email: true, equal: self.email });

任何人都知道如何保持輸入插件與輸入保持在一起？

編輯：驗證後結果HTML：

<div class="input-group"> 
 
    <span class="input-group-addon">@</span> 
 
    <input type="email" class="form-control has-error" id="emailRepeated" data-bind="value: emailRepeated" title="This is not a proper email address" data-orig-title=""> 
 

 
    <span class="help-block" style="">This is not a proper email address</span> 
 
</div>

來源

2014-10-18 Tikkes

您可以使用errorClassconfiguration option設置自己的CSS類。然後，它是一個適當的浮動問題，我想要得到你想要的效果。

好吧我想我找到了解決方案。嘗試添加下面的CSS

.input-group .validationMessage { 
 
    display: table-caption; 
 
    caption-side: bottom; 
 
}

，將在底部

enter image description here

Here is a fiddle它格式化爲你的表樣式，並將其位置的新行（標題）示範目的

更新：second version小提琴

來源

2014-10-18 16:17:37 zewa666

工作，是有沒有辦法得到的東西引導工作？我發現，只要它是自定義驗證，你基本上可以使用jquery驗證來定位errormessage框。但是現在無法使用，因爲我使用的是durandal，出於某種原因，他無法在驗證方法中訪問「self」。還有其他建議嗎？ – Tikkes 2014-10-18 16:26:58

你可能會創造一個問題的小提琴。淘汰賽本身應該足夠了，因爲我不懷疑杜蘭達在這裏造成任何問題。 – zewa666 2014-10-18 16:44:58

好吧我想我有一個解決方案，更新了答案 – zewa666 2014-10-18 17:27:11

如果您在輸入的右側有input-group-addon，則zewa666的答案不起作用。

在這種情況下，您可以使用絕對定位。這樣的事情：

.input-group .help-block { 
    display: block; 
    position: absolute; 
    left: 0px; 
    top: 28px; 
} 

.form-group.has-error { 
    margin-bottom: 30px; 
}

來源

2015-03-03 16:28:21

我意識到這是有點晚，但我有同樣的問題，並提出了不同的解決方案。我所做的是覆蓋ko.validation.insertValidationMessage函數以查看元素是否是輸入組的一部分。如果是這樣，我會在輸入組父元素之後插入消息。無論輸入組插件位於左側還是右側，這都會起作用。

var insertValidationMessage = ko.validation.insertValidationMessage; 

ko.validation.insertValidationMessage = function (element) { 
    if ($(element.parentElement).hasClass('input-group')) { 
     return insertValidationMessage(element.parentElement); 
    } 
    return insertValidationMessage(element); 
}

下面是JS提琴http://jsfiddle.net/kengineer/zfLjdrks/6/

來源

2016-09-09 16:57:07 kengineer

Bootstrap input-group-addon durandal knockout validation

回答

相關問題