带有 HTML5 验证和 JS 的 Rails答案

【问题标题】：Rails with HTML5 validation and JS带有 HTML5 验证和 JS 的 Rails
【发布时间】：2019-07-04 11:48:24
【问题描述】：

在我的 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 下方的内容，但它显示了正确的值-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（取决于空字段）。不知道出了什么问题。

【问题讨论】：

标签： javascript html ruby-on-rails

【解决方案1】：

查看 Hemant Metalia 对 this post 的回复他提到使用event.preventDefault() 而不是e.preventDefault() 很重要，也许它对你有用。

【讨论】：

不，没有任何改变 - 在控制台和提交的表单中仍然有 invalidInput.length = 0。