Проверка радиокнопок с помощью Knockout и Knockout Validation без применения ожидаемого класса CSS

У меня есть форма, в которой у меня есть два набора переключателей. В каждом наборе пользователь должен выбрать один (мы не выбираем один по умолчанию, чтобы пользователь «думал» о выборе того или иного).

Я использую Knockout 2.2.0 и последнюю версию Knockout Validation. У меня проблема с переключателями, поскольку проверка правильно определяет, что переключатель не выбран, однако он не дает класс css для переключателя. Как я могу получить подтверждение для применения css к входам переключателя?

В идеале, после определения того, что радиовход не выбран, я хотел бы применить класс css «invalidElement» к обоим переключателям в группе.

*Примечание. Он применяет класс css «invalidElement» ко всем другим вводам, кроме ввода переключателя. Кроме того, я также пытался написать что-то нестандартное, чтобы выделить входы переключателей, если они не выбраны, но я не слишком хорошо знаком с 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>

javascript knockout.js knockout-validation
person contactmatt    schedule 14.12.2012    source источник
comment
есть ли для этого jsfiddle или jsbin?   -  person Maslow    schedule 01.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, является ли это проблемой с KO или KO-проверкой, но привязка с использованием проверенного вместо значения не может показать валидаторы, как показано в 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

person Maslow    schedule 01.02.2013
comment
Я отметил это как ответ. Этот вопрос / проблема github был открыт мной: D :) - person contactmatt; 01.02.2013
comment
ах здорово! рад, что ответ добрался до SO, тогда - person Maslow; 01.02.2013