具有HTML5驗證和JS的Rails

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下的內容，但它顯示正確的值submit.on('click', function(e) { 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");
    }
  });
}

編輯

調試后，我認為主要的問題出在最后if塊-> if (invalidInput.length === 0 ...當我將調試器放置在此塊下面並在控制台中寫入invalidInput.length時，如果第一個地址出現，我將得到0的發件人是123@example.com，確認電子郵件地址是4321@example.com。當我有空白字段時，它正確顯示為1或2（取決於空白字段）。不知道出了什么問題。

Answer 1

看看Hemant Metalia在這篇文章上的回復。他提到使用event.preventDefault()代替e.preventDefault()很重要，也許對您e.preventDefault() 。