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');
    }
  });
}

编辑

这是视图中的代码片段

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（）和.hide（）在Safari中不起作用-将Spinner添加到<a href但没有任何积极结果。

Answer 1

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

我知道在重构所有内容时可能需要一些前期投资，但否则，从长远来看，如果您继续做自己想做的事情，事情只会变得更糟。

另外，如果您使用的是Bootstrap，还请查看Bootstrap表单gem 。