时间戳

首页 > 解决方案 > 基于表单字段验证添加类

javascript - 基于表单字段验证添加类

问题描述

我正在尝试根据字段的状态向我的表单字段添加类。

这是我想要实现的流程：

  1. 用户第一次看到表单
  2. 用户单击first name表单字段。
  3. 用户没有在first name表单字段中输入任何内容并单击其他地方。
  4. 将类添加.cForm__error到first name字段。
  5. 用户看到first name字段为空并单击该字段以添加文本。
  6. .cForm__error从该字段中删除类。

到目前为止，这是我的方法：

$(function() {

  const form_field = $(".cForm__formField");


  $(form_field).focus(function() {
    $(this).addClass("cForm__hasText");
  });

  $(form_field).blur(function() {
    if (this.value === '') {
      $(this).removeClass("cForm__hasText");
    } else{
        $(this).addClass("cForm__error");
    }
  });

});
.cForm__hasText {
  border: 2px solid blue;
}
.cForm__error {
  border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>


<input class="cForm__formField" type="text" placeholder="first name">

目前，该.cFrom__hasText课程正在出现，但我需要该.cFrom__error课程展示自己并在初始关注后留在那里。

标签： javascripthtmljquery

解决方案

我认为你只是把你的一些逻辑弄错了。以下似乎完全符合您的描述。我假设您想cForm__hasText在用户在字段中键入内容时添加该类。

$(function() {

  const form_field = $(".cForm__formField");


  $(form_field).focus(function() {    
    $(this).removeClass("cForm__error");
  });

  $(form_field).blur(function() {
    if (this.value === '') {
       $(this).addClass("cForm__error");
    } else{
      $(this).addClass("cForm__hasText");       
    }
  });

});
.cForm__hasText {
  border: 2px solid blue;
}
.cForm__error {
  border: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>


<input class="cForm__formField" type="text" placeholder="first name">

推荐阅读