JavaScript, как проверить тот же адрес электронной почты в приложении Rails

Question

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

validations.js

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

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

new.html.erb

<div class="col-xs-12 col-sm-12 col-md-12">
  <div class="floating-label bank-employees-users-registration__registrations-input--wrapper">
    <%= email_field_tag(:email_confirmation, nil, placeholder: t('.email_confirmation'), class: "bank-employees-users-registration__registrations-input floating-field", id: "users-registrations-email-confirmation", required: true ) %>
    <%= f.label :email_confirmation, t('.email_confirmation'), 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>
  </div>
</div>

Я новичок в JS, но есть ли шанс запретить регистрацию пользователя, например, кнопкой отключения, когда проверка не пройдена?

EDIT

Кнопка отправки и возврата ниже

кнопок в new.html.erb

<div class="row">
  <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>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 text-center">
    <%= link_to new_second_step_of_users_registration_path do %>
    <p class="bank-employees-users-registration__registrations-back">
      <i class="fa fa-arrow-circle-o-left"></i>
      <%= t('.back') %>
    </p>
    <% end %>
  </div>
</div>

validations.js

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

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

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

Answer 1

Так что я бы немного упростил это.Все, что вам нужно сделать, это включить кнопку, если электронные письма совпадают, и отключить ее, если они не совпадают.Я думаю, что ваш js файл может быть несколько упрощен, и я бы добавил идентификатор для этой конкретной кнопки отправки.

Поскольку запуск кнопки отключен.(Сделайте идентификатор как хотите, я сделал это users_registration_button, или просто нацеливайтесь на класс, я бы порекомендовал добавить идентификатор.)

<%= submit_tag t('.submit'), id: "users_registration_button", class: "bank-employees-users-registration__submit-btn registrations", disabled: true %>

Затем в вашем файле js.

$(document).ready(function() {
  $('#users-registrations-email-confirmation').keyup(function() { # Just target the confirmation field value, it determines what we do
    var email = $('#users-registrations-email').val(); # Get original email value
    if($(this).val() == email && $(this).val() != '') { # check if they are the same, and also not blank
      $('#users_registration_button').prop('disabled', false); # If they are, enable the button
    } else {
      $('#users_registration_button').prop('disabled', true); # Just in case they change it after it was the same, this should toggle the button on and off so it is only enabled when they match
    }
  });
});