Question

使用基础导轨，我创建了一个表单并使用<small class="error">Invalid entry</small>来显示字段下方的错误。

例如，在div中：

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email" %>
<small class="error error-style">Invalid</small>

error-style是我用来做css样式的类。

如果用户开始填写表单，并填写无效的电子邮件，例如。不包含@，显示错误。但它仍然存在。我希望它进入“隐藏”状态。状态大约5秒后，用户决定不填写表格，但仍在浏览页面。

尝试使用setTimeout和fadeout（）。

任何帮助？

Answer 1

试试这个，

$(function() {
  setTimeout(function(){
    $('.error').slideUp(3000);
  }, 3500);
});

Answer 2

要在前端验证期间显示和删除错误元素，您可能需要使用“更改”事件。最初，给error元素一个hide类，它上面没有显示，你可以用change事件改变它。下面的示例使用addClass和removeClass，但您也可以使用toggleClass。

<%= text_field_tag "email", "", placeholder: "Email", required: true, type: "email", pattern: "email", id: "email_input" %>
<small class="error error-style hide">Invalid</small>

的javascript

function email_is_valid(email) {
  var regex = /[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}/;
  return regex.test(email);
}

$('#email-input').on('change', function(event) {
  $(this).find('.error').addClass('hide');
  var email = $(this).val();

  if (email_is_valid(email)){
    $(this).find('.error').removeClass('hide');
  }
});

CSS

.hide{
  display: none;
}

我在输入元素中添加了一个id，以便轻松定位，因为我不知道你的完整标记;您可能想要更改定位该元素的方式。另外我还没有测试过上面的正则表达式，网上有很多资源可以找到合适的资源。

几秒后让错误类消失 - （foundation-rails）

2 个答案: