在不屬於表單的輸入上設置自定義有效性

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等事件觸發器上進行驗證。