Knockout валидация чекбокса?

Question

[Кирилл Горелов]

Парни, какая-то странная штука произошла с формой.
Есть форма:

iv class="modal fade" tabindex="-1" role="dialog" id="do-official-dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть"><i class="icon-cross"></i></button>
            <h4 class="modal-title"><i class="icon icon-bolt">&nbsp;&nbsp;</i>Сделать проблему официальной.</h4>
          </div>
          <? if(strpos($curl, 'add.php') === false){ ?>
          <form id="fsupport" name="fsupport" action="/personal/off.php" method="post" data-bind="event: {keyup: validate}">
          <? }else{ ?>
          <form name="" method="post" action="/" data-bind="event: {submit: validate}">
          <? } ?>
            <div class="modal-body">
              <div class="text-content">
                <p>После заполнения необходимых полей ваше сообщение о&nbsp;проблеме будет<br /> отправлено должностному лицу в&nbsp;орган местного самоуправления.</p>
              </div>
              <br>
              <div class="form-group" data-bind="validationElement: name">
                <label for="off1">Имя Отчество <span class="text-danger">*</span>:</label>
                <input type="text" name="offname" id="off1" value="<?=$_POST["offname"]?>" class="form-control" data-bind="value: name" required />
              </div>
              <div class="form-group" data-bind="validationElement: surname">
                <label for="off2">Фамилия <span class="text-danger">*</span>:</label>
                <input type="text" name="offsurname" id="off2" value="<?=$_POST["offsurname"]?>" class="form-control" data-bind="value: surname" required />
              </div>
              <div class="form-group" data-bind="validationElement: postaddress">
                <label for="off3">Почтовый адрес <span class="text-danger">*</span>:</label>
                <input type="text" id="off3" name="offaddr" class="form-control" data-bind="value: postaddress" placeholder="Например: 140400, г. Коломна, ул. Ленина, д. 123, кв. 456<?=$_POST["offaddr"]?>" required />
              </div>
              <div class="form-group checkbox-inline" data-bind="validationElement: offers">
                <label for="off4"><span class="text-danger">*</span> Подтверждаю полноту и подлинность указанных мной персональных данных, достоверность информации, содержащейся в обращении, в соответствии с <a role="button" data-toggle="modal" href="#choose-oferta">офертой.</a> </label>
                <input type="checkbox" id="off4" data-bind="checked: offers" class="form-control"/>
              </div>
            <!-- <input type="hidden" name="hole_id" value="<?=IntVal($curlarray[2])?>"> -->            
      <? if(strpos($curl, 'add.php') === false){ ?>
            <input type="hidden" name="hole_id" value="">
            <input type="hidden" id="dooff" name="dooff" value="Y">
            <input type="hidden" id="sendoffname" name="sendoffname" value="">
            <input type="hidden" id="sendoffsurname" name="sendoffsurname" value="">
            <input type="hidden" id="sendoffaddr" name="sendoffaddr" value="">
      <? } ?>  
              <!-- <div class="text-content">
                <p><span class="text-danger">*</span> В&nbsp;соответствии с&nbsp;59-ФЗ &laquo;О&nbsp;рассмотрении обращений граждан&raquo; анонимные сообщения без указания Ф.И.О. и&nbsp;обратного адреса не&nbsp;обязаны рассматриваться госорганами.</p>
              </div> -->
              <div class="help-text user_error-message hidden">Список ошибок</div>
            </div><!-- /.modal-body -->
            <div class="modal-footer">
              <button type="reset" class="btn btn-default" data-dismiss="modal">Нет, спасибо</button>
              <button type="submit" class="btn btn-primary" data-bind="click: validate">Отправить</button>              
              <!--<button type="submit" class="btn btn-primary">Отправить</button>-->
            </div>
          </form>
        </div>
      </div>
    </div>

Надо было сделать согласие на обработку персональных данных. через knockout. Сделали, но не работает. ФИО адрес понимает, а checkbox пишет undefined

Вот обработчик

$(function () {
	var offFormEl = document.getElementById('do-official-dialog');

	if (offFormEl !== null) {
		var offForm = {
			name: ko.observable().extend({
				required: true,
				minLength: 2
			}),
			surname: ko.observable().extend({
				required: true,
				minLength: 2
			}),
			postaddress: ko.observable().extend({
				required: true,
				minLength: 6
			}),
			offers: ko.observable().extend({
				required: true
			}),
			validate: function (form, event) {
				if (form.errors().length === 0) {

					$('#dooff').val('Y');
					$('#sendoffname').val( $('#off1').val() );
					$('#sendoffsurname').val( $('#off2').val() );
					$('#sendoffaddr').val( $('#off3').val() );

					if ( $(event.currentTarget).find('[name="hole_id"]').length != 0 ) {
						return true
					}
					else {
							// форма используется в составе другой формы
						$(offFormEl).modal('hide')
					}
				}
				else {
					form.errors.showAllMessages();

					console.log(form.errors(), ' show3.65');
					console.log(offForm, ' show3.6');
					
					
				}
			}
		};
		offForm.errors = ko.validation.group(offForm);
		$(offFormEl).on('hidden.bs.modal', function () {
			// Обнуляем поля
			Object.keys(offForm).forEach(function (field) {
				if (ko.isWritableObservable(offForm[field])) {
					offForm[field](undefined);
				}
			});
			offForm.errors.showAllMessages(false);
			$(this).find('.user_error-message').addClass('hidden')
		})
	};
	ko.applyBindingsWithValidation(offForm, offFormEl, {
		messagesOnModified: true,
		insertMessages: true,
		decorateElementOnModified: true,
		parseInputAttributes: true,
		decorateInputElement: true,
		errorElementClass: 'has-error',
		errorClass: 'has-error',
		messageTemplate: 'errorMessageTemplate'
	});
});

ТО есть добавили в форму

<div class="form-group checkbox-inline" data-bind="validationElement: offers">
                <label for="off4"><span class="text-danger">*</span> Подтверждаю полноту и подлинность указанных мной персональных данных, достоверность информации, содержащейся в обращении, в соответствии с <a role="button" data-toggle="modal" href="#choose-oferta">офертой.</a> </label>
                <input type="checkbox" id="off4" data-bind="checked: offers" class="form-control"/>
              </div>

И в код обработчика

offers: ko.observable().extend({
				required: true
			}),

Что сделано не так((( Подскажите, пожалуйста.

Answer 1

[forspamonly2]

однако, лютый у вас говнокод. нокаут, жыквери и пхп - всё вперемешку. никакого желания разбираться где и чем оно там "говорит".

но, судя по последнему фрагменту, вы неправильно понимаете логику валидатора required. чекбокс не может быть незаполнен: отсутствие галки - это вполне конкретное значение false.

наверное вы имели в виду валидатор .extend({ equal: true })