bootstrap_form gem`invalid-feedback`元素未呈现

时间:2019-11-19 16:40:09

标签: ruby-on-rails bootstrap-4 rubygems

当前正在运行 Rails 5 Ruby 2.6 Bootstrap 4+ Bootstrap_form 4.3

在GitHub页面上查找文档:https://github.com/bootstrap-ruby/bootstrap_form#validation-and-errors

我不知道如何调用invalid-feedback元素。 ReadME文件使该元素看起来像默认情况下应该呈现,但不是。我尝试通过将表单设置为inline_errors: true来强制执行此操作,但没有看到任何更改。

这是仅在服务器访问之后才出现的东西吗?我希望将其用于客户端验证。我可以通过在input元素上使用wrapper: false设置并添加自己的标记来解决此问题,但是这样做的感觉就像我正在忽略一大堆否则会非常有用的功能。

这是我的表单(HAML)的代码段:

= bootstrap_form_for(@user),
      html: { class: 'needs-validation', novalidate: true },
      validate: :user_validators) do |f|
      .row
        .col.mb-4
          = f.hidden_field :url_hash, value: nil
          = f.email_field :email, required: true, autofocus: true, autocomplete: :off,
            placeholder: t('###')
          = f.password_field :password, required: true, autocomplete: :off,
            placeholder: "###"

      .row
        .col.text-center
          = f.submit t('v2.log_in.form.button'), class: 'btn btn-primary',
            title: t('v2.log_in.form.button')

这是生成的HTML

<form class="needs-validation" novalidate="novalidate" role="form" id="" action="" accept-charset="UTF-8" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden">
  <div class="row">
    <div class="col mb-4">
      <input type="hidden" name="" id="" value="">
      <div class="form-group">
        <label class="required" for="user_email">Email</label>
        <input required="required" autofocus="autofocus" autocomplete="off" placeholder="" class="form-control" type="email" value="" name="" id="user_email">
      </div>
      <div class="form-group">
        <label class="required" for="user_password">Password</label>
        <input required="required" autocomplete="off" placeholder="password" class="form-control" type="password" name="" id="user_password">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col text-center">
      <input type="submit" name="commit" value="Log In" class="btn btn-primary btn-rounded mb-3" title="Log In" data-disable-with="Log In">
    </div>
  </div>
</form>

0 个答案:

没有答案