Validating Radio Buttons with Knockout and Knockout Validation not applying expected CSS class

Question

I have a form where I have two sets of radio buttons. In each set the user must select one (we don't select one by default in order that the user must "think" about selecting one or the other).

I'm using knockout 2.2.0 and the latest version of Knockout Validation. I'm having an issue with radio buttons, in that the validation will correctly determine that a radio button is not selected, however, it does not give a css class to the radio button. How can I get the validation to apply the css to the radio button inputs?

Ideally, after determining that a radio input is not selected, i would like to apply a css class of 'invalidElement' to both radio buttons in the group.

*Note: It applies a css class of 'invalidElement' to all other inputs, except radio button inputs. Also, I have also looked into writing something custom to highlight the radio button inputs if they are not selected, but I am not too familiar with Knockout to do this.

(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 with bindings...

  <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

I'm not sure if this is an issue with KO or KO-validation, but binding using checked instead of value fails to show the validators as shown in http://jsfiddle.net/uXzEg/1/

Here's the working 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

and the 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>

and the issue that led me to it

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