Зависимое раскрывающееся меню не работает должным образом в Safari - вызывает ложную положительную ошибку проверки - PullRequest
1 голос
/ 20 марта 2020

У меня есть форма с зависимым полем, которая работает нормально во всех браузерах, кроме Safari. При использовании Safari пользователь получает сообщение об ошибке проверки «Это поле обязательно» в поле «Имя места», даже если оно заполнено. Ошибка проверки является ложноположительной, и это означает, что пользователь не может отправить форму.

Я думаю, что это почти наверняка связано с тем, что поле «Название места» состоит из 2 зависимых полей - в первом раскрывающемся списке необходимо выбрать «Центральный» или «Региональный центр округа», а во втором В раскрывающемся списке (который отображается только в том случае, если в первом раскрывающемся списке выбран «Региональный центр округа»), необходимо выбрать соответствующий центр округа. Ошибка проверки не появляется, если в первом раскрывающемся списке вы выбираете «Региональный центр округа», а во втором раскрывающемся списке центр округа, поэтому сценарий в порядке. Ложноположительная ошибка проверки появляется только в том случае, если в первом раскрывающемся списке выбран «Центральный». В этом случае второй раскрывающийся список не появляется (так как он актуален только для региональных пользователей). Поэтому я подозреваю, что Safari ожидает, что пользователь выберет значение во втором раскрывающемся меню, даже если оно скрыто от пользователя и не требуется заполнять в этом сценарии.

При попытке открыть форму или отправить ее в консоли разработчика Safari не отображаются ошибки.

Это код соответствующей части формы (многие из них опущены параметры во втором раскрывающемся меню, поскольку оно очень длинное):

<fieldset class="content">
<legend>Details</legend>
<ul class="form-controls">
    <span data-hide="true" resource="this:place-1" typeof="place:Place"></span>                     
    <span data-hide="true" resource="this:place-case-1" typeof="place:PlaceCase"></span>                        
    <li class="">
        <label for="this-place-1_place-placeName-1">Place Name:                         </label>
        <select id="this-place-1_place-placeName-1" name="this:place-1[place:placeName]" required="required" aria-required="true" class="conditional-field-control" data-conditional-field-target="#this-place-2_place-countyPlaceName-1" data-conditional-field-show-when="County regional centre">
            <option disabled="disabled"> Please Select</option>
            <option value="Central">Central</option>
            <option value="County regional centre">County regional centre</option>
        </select>
    </li>
    <li class="">
        <label for="this-place-2_place-countyPlaceName-1">                      </label>
        <select id="this-place-2_place-countyPlaceName-1" name="this:place-1[place:countyPlaceName]" required="required" aria-required="true" class="data-setter" data-setter-target="#this-notifiableThing_corp-insolvency-nameOfPlaceOfRegional-1">
            <option disabled="disabled"> Please choose from the following regional centres: (if applicable)</option>
            <option value="Aberystwyth">Aberystwyth</option>
            <option value="Aldershot and Farnham">Aldershot and Farnham</option>
            <option value="Aylesbury">Aylesbury</option>
            <option value="Barrow-in-Furness">Barrow-in-Furness</option>
            <option value="York">York</option>
        </select>
    <li class="partial-submit"><input class="btn-hidden-js btn-partial-submit" formnovalidate="formnovalidate" name="select-place" type="submit" value="Select Place" /></li>
    </li>                                       
</ul>

...