JavaScript how to validate the same email address in Rails app

Question

I've got a Rails app where I have validation of email not in model but in a view (and this couldn't be changed). Now I want to register a new customer and i enter two different email addresses, I can still continue the to go to the next page even though these fields are not validated - the addresses are not the same, I can see the errors below the form but still.

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>

I'm new in JS but is there any chance to not allow register user by, for example disable button, when the validation fails?

EDIT

Submit and back button below

buttons in 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

So I would simplify this quite a bit. All you need to do is enable the button if the emails match, and disable it when they don't. I think you js file can be simplified quite a bit, and I would also add an id to target this specific submit button.

For the button start out disabled. (Make the id whatever you want, I made it users_registration_button , or just target the class, I would recommend adding an id though.)

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

Then in your js file.

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