带有HTML5验证和JS的导轨

Question

在我的Rails应用程序中，我为匹配的电子邮件提供了验证表格。由于某种原因验证无效 - 它在下面显示错误(当电子邮件地址不相等时(，但它提交表单并转到下一页。

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

编辑

调试后，我认为主要问题是最后一个if块 -> if (invalidInput.length === 0 ...。当我将调试器放在此块之下并在控制台下写invalidInput.length时，如果第一个地址从is [e-mail]出发，并且确认电子邮件地址为[e-mail]，我将获得0。当我有空字段时，它正确显示为1或2(取决于空字段(。不知道怎么了。

Answer 1

看这篇文章中的Hemant Metalia响应他提到使用event.preventDefault()而不是e.preventDefault()很重要，也许对您有用。