时间戳

首页 > 解决方案 > JavaScript 如何在 Rails 应用程序中验证相同的电子邮件地址

javascript - JavaScript 如何在 Rails 应用程序中验证相同的电子邮件地址

问题描述

我有一个 Rails 应用程序，我在其中验证电子邮件不是在模型中，而是在视图中（这是无法更改的）。现在我想注册一个新客户并输入两个不同的电子邮件地址，即使这些字段未经过验证，我仍然可以继续转到下一页 - 地址不一样，我可以看到表格下方的错误但仍然。

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

新的.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>

我是 JS 的新手，但是当验证失败时，是否有机会不允许注册用户，例如禁用按钮？

编辑

下面的提交和返回按钮

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>

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

标签： javascriptruby-on-railsvalidation

解决方案

所以我会稍微简化一下。您需要做的就是在电子邮件匹配时启用该按钮，并在不匹配时禁用它。我认为您js的文件可以简化很多，我还会添加一个 id 来定位这个特定的提交按钮。

对于按钮启动禁用。（让 id 随心所欲，我做到了users_registration_button，或者只是针对班级，但我建议添加一个 id。）

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

然后在你的js文件中。

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

推荐阅读