Question

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

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

new.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>

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

Answer 1

因此，我将简化一下。您需要做的就是在电子邮件匹配的情况下启用该按钮，在不匹配的情况下将其禁用。我认为您的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
    }
  });
});

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

1 个答案: