JS/JQuery error messages didn't hide in Safari using .show() and .hide

JavaScript
#1

I’m really stuck here, maybe someone will be my savior. I have some validation in JQuery (this is a Rails app) where I validate field for equals two email address, phone number and gender. If I click submit, leaving fields empty, I received an error required field but after filling in these fields, error don’t hide. The problem only occurs in the Safari browser, in Chrome everything is perfect.

  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();
  validateFile();
  validateRadios();
  validateCheckbox();
  scrollToFirstInvalid();

  var invalidInput = $('input:invalid');
  var fileInput = $('#identification_document_id_document');

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

I thought the Safari cannot handle with .hide() and .show() methods so I was trying to replace this by adding some additional css class and use addClass and removeClass without any positive results. Any ideas?

#2