Установка пользовательской действительности для ввода, который не является частью формы - PullRequest
0 голосов
/ 15 мая 2019

Я пытаюсь изменить сообщение об ошибке для ввода в моем приложении rails.Я уже делаю это, используя тот же код для других входных данных, которые находятся внутри формы.Однако эти входные данные не являются частью формы.Проверка работает, но сообщение - нет.Я хочу сказать Contains unsupported characters, но я получаю Please match the requested format..

существующий код (_update.html.erb)

<%= form_tag(dashboard_residents_path, remote: true, method: :put, class: 'update-resident hideable deactivated') do |f| %>
  <div class="row form-row">
    <label>Update resident information</label>
    <div class="col-md-6">
      <%= text_field_tag 'resident[first_name]', nil, class: 'form-control', placeholder: 'First Name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')" %>
    </div>
    <div class="col-md-6">
      <%= text_field_tag 'resident[last_name]', nil, class: 'form-control', placeholder: 'Last Name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')" %>
    </div>
  </div>
  <div class="row form-row">
    <div class="col-md-12">
      <%= email_field_tag 'resident[email]', nil, class: 'form-control', placeholder: 'Email', required: true, autocomplete: 'resident-email' %>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12 center">
      <%= submit_tag 'Update Resident Name', id: 'update-resident-submit', class: 'btn btn-primary', data: {disable_with: 'Please wait...'} %>
      <button class="btn start-over">Start Over</button>
    </div>
  </div>
<% end %>

новый модал (_update.hbs.erb)

<div class="row text-center edit-address">
  <div class="col-xs-12">
    <h1>Full Name Required</h1>
  </div>
  <div class="col-xs-6">
    {{#if first_name}}
        <%= text_field_tag 'resident[first_name]', nil, class: 'form-control pull-left modal-input', autocomplete: 'resident-first-name', placeholder: 'First name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')", disabled: true %>
    {{else}}
        <%= text_field_tag 'resident[first_name]', nil, class: 'form-control pull-left modal-input', autocomplete: 'resident-first-name', placeholder: 'First name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')", disabled: false %>
    {{/if}}
  </div>
  <div class="col-xs-6">
    {{#if last_name}}
      <%= text_field_tag 'resident[last_name]', nil, class: 'form-control pull-left modal-input', autocomplete: 'resident-last-name', placeholder: 'Last name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')", disabled: true %>
    {{else}}
      <%= text_field_tag 'resident[last_name]', nil, class: 'form-control pull-left modal-input', autocomplete: 'resident-last-name', placeholder: 'Last name', required: true, maxlength: 50, pattern: '^(?!.*\.\S)[a-zA-Z àâäôéèëêïîçùûüÿæœÀÂÄÔÉÈËÊÏΟÇÙÛÜÆŒößÖẞąćęłńóśźżĄĆĘŁŃÓŚŹŻìíòúÌÍÒÚáñÁÑ \',.-]+$', oninvalid: "setCustomValidity('Contains unsupported characters.')", oninput: "setCustomValidity('')", disabled: false %>
    {{/if}}
  </div>
  <div class="clear"></div>
  <button id="submit_name" class="button1 btn btn-block">Submit</button>
</div>

update

Я добавил этот прослушиватель событий в шаблон магистрали.И он всегда записывает valid независимо от ввода.

onInput: function(e) {
  console.log(e.target.validity);
  if (e.target.patternMismatch) {
    console.log('invalid');
    e.target.setCustomValidity("Contains unsupported characters.");
  } else {
    console.log('valid')
    e.target.setCustomValidity("");
  }
},

1 Ответ

0 голосов
/ 16 мая 2019

У вас должен быть триггер для вызова проверки. setCustomValidity запускается только после определения срока действия. Элементы формы обычно проверяются при отправке с использованием jQuery или триггеров событий, таких как blur, которые срабатывают, когда фокус покидает ввод.

...