Неверная проверка <select> Использование parsley.js, заполняемого объектом

Question

У меня возникли проблемы с проверкой элемента <select> на моей форме. С помощью knockout.js выбрано местоположение, которое затем заполняет точку обслуживания на основании выбранного местоположения. После нажатия кнопки отправки форма подтверждается parsley.js

Я продолжаю получать «Это значение необходимо». на месте <select>, когда петрушка пытается проверить форму. Он заполняется в порядке, и значения появляются и текут, возвращаясь к базе данных, как и ожидалось, когда валидация отключена, но когда проверка включена, петля бросает сообщение об ошибке «Это значение требуется». где в раскрывающемся списке «Местоположения» явно указано значение, иначе точка обслуживания не была бы выбрана.

Я новичок в этих библиотеках, но мое предположение связано с тем, что оно заполняется объектом, хотя я не думал, что это будет проблемой, поскольку там все еще есть ценность.

Надеюсь, я предоставил достаточно информации, если вам нужно что-нибудь еще, что я могу предоставить.

Любые идеи были бы высоко оценены!

viewModelLocationAndServicePoint.data()

[ 
    { 
     "ServicePoints": [ 
      { 
       "ServicePoint": "ServicePoint1" 
      } 
     ], 
     "Location": "Location1" 
    }, 
    { 
     "ServicePoints": [ 
      { 
       "ServicePoint": "ServicePoint1" 
      }, 
      { 
       "ServicePoint": "ServicePoint2" 
      }, 
      { 
       "ServicePoint": "ServicePoint3" 
      } 
     ], 
     "Location": "Location2" 
    } 
] 

Популяция наблюдаемых

self.Location = ko.observable(data.Location().Location()); 
self.ServicePoint = ko.observable(data.ServicePoint()); 

viewModelTrackFiles Выход

{ 
    "trackfile": { 
     "Location": { 
      "ServicePoints": [ 
       { 
        "ServicePoint": "ServicePoint1" 
       } 
      ], 
      "Location": "Location1" 
     }, 
     "TransactionMode": "", 
     "ServicePoint": "ServicePoint1", 
     "Status": "", 
     "Comments": "", 
     "Barcode": "", 
     "BarcodeImageBase64": "" 
    }, 
    "files": [], 
    "printneeded": "no", 
    "TransactionMode": "", 
    "dispatchmode": false, 
    "StaffName": "", 
    "TransactionDate": "2017-02-06T16:29:49.914Z" 
} 

HTML

<select id="cLocation" 
    data-parsley-required="true" 
    data-bind="options: viewModelLocationAndServicePoint.data(), 
     optionsCaption:'Choose Location', 
     optionsText: 'Location', 
     value: trackfile.Location"> 
</select> 

<div data-field-span="1" data-bind="with: trackfile.Location"> 
    <select id="cServicePoint" 
     data-parsley-required="true" 
     data-bind="options: ServicePoints, 
      optionsCaption:'Service Points', 
      optionsText: 'ServicePoint', 
      optionsValue: 'ServicePoint', 
      value: $parent.trackfile.ServicePoint"> 
    </select> 
</div> 

Answer 1

Я пришел с грязным обходным путем, который работает в настоящее время, если кто-то могут придумать что-то лучше или объяснить, почему Петрушка не признает, что есть на самом деле значение в <select> это было бы фантастически!

Я создал скрытый текст <input>, который заполняется <select>, когда он изменяется.

Затем положите валидацию на этот текст <input>. Это приводит к появлению сообщения об ошибке Parsley под номером <select>, но не меняет цвет фона <select> (см. Снимок экрана ниже), с которым я могу жить пока.

HTML

<select id="cLocation" 
    data-bind="options: viewModelLocationAndServicePoint.data(), 
     optionsCaption:'Choose Location', 
     optionsText: 'Location', 
     value: trackfile.Location"> 
</select> 
<input style="display: none" type="text" id="loc" data-parsley-required="true"> 

JQuery скрипт

<script type="text/javascript"> 
    $(function() { 
     $("#cLocation").on("change", function() { 
      //Update hidden text input to fix issue 
      //where ParsleyJS is not validating Location 
      //dropdown possibly due to how it is being populated 
      $("#loc").val($("#cLocation option:selected").text()); 
     }); 
    }); 
</script> 

Скриншот