Rails with HTML5 validation and JS

Question

In my rails app I have validation form for matched email. For some reason validation doesn't worked - it shows error below form (when email addresses are not equal) but it submits the form and goes to the next page anyway.

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>

Any idea? I put the debugger below the submit.on('click', function(e) { to check what is under invalidInput but it shows correct value - input:invalid . So maybe some form is overriding the whole logic, I don't know, any suggestions are welcomed.

Function of checking if email address are the same is here:

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

After debugging I think the main problem is in last if block -> if (invalidInput.length === 0 ... . When I put debugger below this block and in console wrote invalidInput.length I will get 0 in case when first address in from is 123@example.com and the confirmation email address is 4321@example.com. When I have empty field it shows correctly as 1 or 2 (depends on empty field). No idea what's going wrong.

Answer 1

看看Hemant Metalia在这篇文章上的回复。他提到使用event.preventDefault()代替e.preventDefault()很重要，也许对您e.preventDefault() 。