使用Knockout验证单选按钮，Knockout Validation未应用预期的CSS类

Question

我有一个表单，其中有两组单选按钮。在每个集合中，用户必须选择一个(默认情况下，我们不会选择一个，以便用户必须"考虑"选择其中一个)。

我使用的是knockout 2.2.0和最新版本的knockout Validation。我对单选按钮有一个问题，因为验证将正确地确定没有选择单选按钮，但是，它没有为单选按钮提供css类。如何获得将css应用于单选按钮输入的验证？

理想情况下，在确定没有选择单选输入后，我想将"invalidElement"的css类应用于组中的两个单选按钮。

*注意：它将"invalidElement"的css类应用于除单选按钮输入之外的所有其他输入。此外，我还研究过写一些自定义的东西，如果单选按钮输入没有被选中，可以突出显示，但我对Knockout不太熟悉，无法做到这一点。

(function ($) {
var viewModelSlide1;
$(function () { // Document ready
ko.validation.configure({
decorateElement: true, // Indicates whether to assign an error class to the <input> tag when your property is invalid
errorElementClass: 'invalidElement',  // The CSS class assigned to validation error messages
registerExtenders: true,
messagesOnModified: true, // Indicates whether validation messages are triggered only when properties are modified or at all times
insertMessages: false, // Indicates whether <span> tags with the validation message will be inserted to the right of your <input> element
parseInputAttributes: true // Indicates whether to assign validation rules to your ViewModel using HTML5 validation attributes
});
function viewModelSlide1Definition() {
var self = this;
self.loanPurpose = ko.observable("").extend({ required: true });          
self.hasAccount = ko.observable("").extend({ required: true });
//Validation observable(s)
self.errors = ko.validation.group(self);
submit: function () {
if (viewModelSlide1.errors().length == 0) {
alert('Thank you.');
} else {
alert('Please check your submission.');
viewModel.errors.showAllMessages(); // This will apply the css styles to all invalid inputs except radio buttons
}
}
};
// Activate knockout.js
viewModelSlide1 = new viewModelSlide1Definition();
ko.applyBindings(viewModelSlide1, $("#step-step-0")[0]);
}); // End document ready
})(jQuery);

带绑定的HTML。。。

<div id="step">
<fieldset id="custom-step-1" class="step" title="Getting Started">
<label>Purchase</label><input class="required" type="radio" name="radioLoanPurpose" value="purchase" data-bind="checked: loanPurpose" />
<label>Refinance</label><input class="required" type="radio" name="radioLoanPurpose" value="refinance" data-bind="checked: loanPurpose" />
<br />      
<label>Do you have an account</label>
<span>Yes</span><input type="radio" name="radioHaveAccount" value="true" data-bind="checked: hasAccount" />
<span>No</span><input type="radio" name="radioHaveAccount" value="false" data-bind="checked: hasAccount" />
</fieldset>
<input type="submit" class="finish" data-bind="click:submit"/>
</div>

Answer 1

我不确定这是KO还是KO验证的问题，但使用checked而不是value的绑定无法显示验证器，如http://jsfiddle.net/uXzEg/1/

以下是工作javascript：

$(function () { // Document ready

var viewModelSlide1Definition = ko.validatedObservable({
loanPurpose : ko.observable().extend({
required: true
}),
hasAccount: ko.observable().extend({
required: true
}),
submit: function () {
if (this.isValid()) {
alert('Thank you.');
} else {
console.log(this.hasAccount());
alert('Please check your submission.');
this.errors.showAllMessages();
}
}
});
// Activate knockout.js

ko.applyBindings(viewModelSlide1Definition);
}); // End document ready

和html

<div id="step">
<fieldset id="custom-step-1" class="step" title="Getting Started">
<label>Purchase</label>
<input type="radio" name="radioLoanPurpose"
value="purchase" data-bind="value: loanPurpose" />
<label>Refinance</label>
<input type="radio" name="radioLoanPurpose"
value="refinance" data-bind="value: loanPurpose" />
<br />
<label>Do you have an account</label> <span>Yes</span>
<input type="radio" name="radioHaveAccount"
value="true" data-bind="value: hasAccount" /> <span>No</span>
<input type="radio" name="radioHaveAccount" value="false"
data-bind="value: hasAccount" />
</fieldset>
<input type="submit" class="finish" data-bind="click:submit" />
</div>

以及导致我选择的问题

https://github.com/ericmbarnard/Knockout-Validation/issues/193