Rails с проверкой HTML5 и JS

Question

В моем приложении rails есть форма для проверки соответствия электронной почты. По какой-то причине проверка не сработала - она ​​показывает ошибку ниже формы (когда адреса электронной почты не совпадают), но она отправляет форму и в любом случае переходит на следующую страницу.

validations.js

if (registrationsForm.length > 0) {
    restrictZipCodeToNum();
    restrictPhoneToNum();

  submit.on('click', function(e) {
    var invalidInput = $('input:invalid');

    e.preventDefault();

    if (emailField.val() !== emailConfirmationField.val() && emailField.length > 0) {
      emailInvalidMsg.show();
      emailField.addClass("invalid");
      emailConfirmationField.addClass("invalid");
      if (emailField.val() !== '') obligatoryInvalidMsg.hide();
    }
    validateEmail();
    scrollToFirstInvalid();

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

new.html.erb

<div
  class="col-sm-12 col-md-12 col-xs-12 text-center bank-employees-users-registration__registrations-submit--wrapper">
  <%= submit_tag t('.submit'), class: "bank-employees-users-registration__submit-btn registrations" %>
</div>

Есть идеи? Я поставил debugger ниже submit.on('click', function(e) {, чтобы проверить, что находится под invalidInput, но он показывает правильное значение - input:invalid. Так что, может быть, какая-то форма перекрывает всю логику, я не знаю, приветствуются любые предложения.

Функция проверки того, совпадает ли адрес электронной почты здесь:

function validateEmail() {
  $('input[type="email"]').change(function() {
    if (emailField.val() === emailConfirmationField.val() && emailField.val() !== '') {
      obligatoryInvalidMsg.hide();
      emailInvalidMsg.hide();
      emailField.removeClass("invalid");
      emailConfirmationField.removeClass("invalid");
    } else if (emailField.val() === emailConfirmationField.val() && emailField.val() === '') {
      emailInvalidMsg.hide();
      obligatoryInvalidMsg.show();
      emailField.addClass("invalid");
      emailConfirmationField.addClass("invalid");
    } else {
      obligatoryInvalidMsg.hide();
      emailInvalidMsg.show();
      emailField.addClass("invalid");
      emailConfirmationField.addClass("invalid");
    }
  });
}

EDIT

После отладки я думаю, что главная проблема в последнем if блоке -> if (invalidInput.length === 0 .... Когда я помещаю отладчик ниже этого блока и в консоли пишу invalidInput.length, я получу 0 в случае, когда первый адрес от - 123@example.com, а адрес электронной почты для подтверждения - 4321@example.com. Когда у меня есть пустое поле, оно отображается правильно как 1 или 2 (зависит от пустого поля). Понятия не имею, что происходит.

Answer 1

Посмотрите на ответ Хеманта Металиа на в этом посте Он упоминает, что важно использовать event.preventDefault() вместо e.preventDefault(), возможно, это работает для вас.