在不属于表单的输入上设置自定义有效性

Question

我正在尝试修改 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>

更新

我已将此事件侦听器添加到主干模板。无论输入如何，它都会记录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("");
  }
},

Answer 1

您必须有一个触发器才能调用验证。 setCustomValidity 仅在确定有效性后运行。表单元素通常在提交时使用 jQuery 进行验证，或者在焦点离开输入时触发的事件触发器（例如 blur）进行验证。