Javascript/JQuery 错误消息没有隐藏在 Safari 中

Question

在我的注册表单中，我有一些验证逻辑在 Chrome 中运行良好，但在 Safari 中，错误消息在填写空字段后不会在表单下方消失。看起来 show() 和 hide() 不起作用，我现在不知道为什么，因为基于此 https://www.quirksmode.org/dom/events/index.html 它应该起作用。

if (registrationsForm.length > 0) {
  var emailField = $('#users-registrations-email');
  var emailConfirmationField = $('#users-registrations-email-confirmation');
  var emailInvalidMsg = $('.bank-employees-users-registration__registrations__not-identical-email');
  var obligatoryInvalidMsg = $('.bank-employees-users-registration__registrations__email--invalid');

  submit.on('click', function(e) {

    e.preventDefault();

    if (emailField.val() !== emailConfirmationField.val() && emailField.length > 0) {
      emailInvalidMsg.show();
      emailField.addClass("invalid");
      emailConfirmationField.addClass("invalid");
      emailConfirmationField[0].setCustomValidity('Incorrect confirmation email');
      if (emailField.val() !== '') obligatoryInvalidMsg.hide();
    } else {
      emailConfirmationField[0].setCustomValidity('');
    }

    validateEmail();

    var invalidInput = $('input:invalid');

    if (invalidInput.length === 0 && !fileInput.hasClass('invalid')) {
      form.submit();
    } else {
      invalidInput.addClass('invalid');
      validateInput();
    }
  });
}

负责输入验证的函数：

function validateInput() {
  $('input').change(function() {
    if ($(this).is(':valid')) {
      $(this).removeClass('invalid');
    }
  });
}

编辑

这是一个代码 sn-p 视图

new.html.erb

<div class="floating-label bank-employees-users-registration__registrations-input--wrapper">
  <%= f.email_field :email, class: "bank-employees-users-registration__registrations-input floating-field", id: "users-registrations-email", placeholder: t('.email'), required: true, aria_required: true %>
  <%= f.label :email, t('.email'), class: "floating-label-placeholder" %>
  <span class="bank-employees-users-registration__registrations__not-identical-email">
    <%= t('.email_not_identical') %>
  </span>
  <span
    class="bank-employees-users-registration__registrations-input--invalid-msg bank-employees-users-registration__registrations__email--invalid"
    id="bank-employees-users-registration__registrations__email--invalid">
    <%= t'.obligatory' %></span>
  <% if @registration_form.errors.full_messages_for(:email).first %>
  <div class="alert alert-danger">
    <div class="error-explanation">
      <%= t('activerecord.errors.models.user.attributes.email.taken') %>
    </div>
  </div>
  <% end %>
</div>

编辑2

也许这会有所帮助 - 正如您所看到的，在某些电子邮件验证中，两个电子邮件地址必须相等。当我提供不同的电子邮件地址时，它会向我显示它们不相等的错误消息，但如果我更正它们，错误将更改为 - this field is required。我试图实现这个解决方案jquery .show() and .hide() not working in safari - adding spinner to <a href，但没有任何积极的结果。

Answer 1

为什么不摆脱所有这些并使用 HTML5 字段呢？它们具有跨浏览器的客户端验证，您可以使用模型验证在服务器端验证输入，让 Rails 处理所有这些。

我知道重构所有这些可能需要一些前期投资，但如果你继续做你正在做的事情，从长远来看，事情只会变得更糟。

如果您使用的是 Bootstrap，还请查看 Bootstrap form gem。