Обязательное поле не работает с загрузочным токенфилдом

У меня проблема, когда браузер не открывает всплывающее окно в пустое поле ввода.

<input type="text" class="form-control" id="tokenfield" value="" required/>

Пробовал поиск в Интернете, но не смог найти решение.

Вот рабочий пример проблемы: http://jsfiddle.net/rns3hang/182/

Если я удалю все js из этого примера, то по умолчанию откроется окно браузера «Пожалуйста, заполните это поле».

Есть ли этому решение?

javascript,jquery,html5,twitter-bootstrap,bootstrap-tokenfield,

0

Ответов: 1


0

Интересный вопрос. Если вы попробуете отладку, вы увидите, что обработчик отправки формы не вызывается вообще. Это потому, что за кулисами ваше токенфилд фактически создает свой собственный вход:

<div class="tokenfield form-control">
  <input type="text" class="form-control" id="tokenfield" value="" required="" tabindex="-1" style="position: absolute;left: -10000px;">
  <input type="text" tabindex="-1" style="position: absolute; left: -10000px;"><span role="status" aria-live="polite" class="ui-helper-hidden-accessible">9 results are available, use up and down arrow keys to navigate.</span>
  <input type="text" class="token-input ui-autocomplete-input" autocomplete="off" placeholder="" id="tokenfield-tokenfield"
  tabindex="0" style="min-width: 60px; width: 640px;">
</div>

Как вы, вероятно, видите, ваш исходный вход #tokenfield сдвинут влево на 10 тысяч пикселей, чтобы вы не могли его увидеть. Поэтому, когда вы нажимаете «Отправить», проверка HTML5 имеет место, но на элементе, который вы больше не используете. (просто попробуйте удалить все добавленные CSS на #tokeninput)

Что касается решения, если вам действительно нужно придерживаться tokenfield, попробуйте использовать его собственные события и проверку при создании своей логики представления пользовательской формы.

JavaScript, JQuery, html5, твиттер-самозагрузка, самозагрузки-tokenfield,
Похожие вопросы