导轨 |如何使用 Tailwind 定位无效输入字段

Posted 2023-02-15

【中文标题】导轨 |如何使用 Tailwind 定位无效输入字段

【英文标题】：Rails | How to target Invalid Input fields with Tailwind

【发布时间】：2021-07-22 11:00:50

【问题描述】：

这很烦人，因为我觉得我已经尝试了所有方法。我的目标是在输入无效时在无效输入字段周围设置一个红色环。如何定位 rails 6 中的无效输入字段。我使用的是由 devise 生成的 rails 表单。我也在使用顺风 css。

我已经尝试了以下所有方法。

.invalid
   @apply ring-2 ring-red-700

.input:invalid
    @apply ring-2 ring-red-700
 

.input-group 

    .invalid 
        @apply ring-2 ring-red-700
    

这是我用来注册用户的表格

<% content_for :devise_form do %>
    <%= form_for(resource, as: resource_name, url: session_path(resource_name),  :html => :class => 'form-horizontal' ) do |f| %>
      <div class="input-group">
        <%= f.label :email %><br />
        <%= f.email_field :email, 
                          autofocus: true, 
                          autocomplete: "email", 
                          class: "input",
                          placeholder: "Your Email"%>
      </div>
      
      <div class="input-group">
        <%= f.label :password %><br />
        <%= f.password_field :password, 
                              autocomplete: "current-password", 
                              class: "input"%>
                              
      </div>
    
      <% if devise_mapping.rememberable? %>
        <div class="field">
          <%= f.check_box :remember_me %>
          <%= f.label :remember_me %>
        </div>
      <% end %>
    
      <div class="input-group">
        <%= f.submit "Log in", class: "btn btn-default loader" %>
      </div>
    <% end %>
    
    <hr class="mt-6 border" />
    
    <%= render "devise/shared/links" %>
<% end %>  
<%= render "devise/shared/form_wrapper" %>

那么如何定位输入无效的字段呢？

【参考方案1】：

@layer components 
  .field_with_errors  @apply border-2 border-red-700

【参考方案2】：

我最终在浏览器中使用了开发者工具。我检查了名为 input#user_password.invalid 的元素。所以长期的解决方案是使用检查元素。