基于表单字段验证添加类答案

【问题标题】：Adding classes based on form field validation基于表单字段验证添加类
【发布时间】：2021-07-11 17:36:30
【问题描述】：

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

这是我想要实现的流程：

用户第一次看到表单
用户点击first name 表单域。
用户没有在first name 表单域中输入任何内容，而是在其他地方点击。
将.cForm__error 类添加到first name 字段。
用户看到first name 字段为空，并单击该字段以添加文本。
从该字段中删除类 .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 类呈现自己并在初始焦点后保持在那里。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

我认为你只是把你的一些逻辑弄错了。以下似乎完全符合您的描述。我假设您想在用户在字段中输入内容时添加 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">

【讨论】：

【解决方案2】：

blur() 中的其他人说如果有是一个值，则添加错误类，所以它是向后的

您可以使用toggleClass(className, boolean) 来涵盖错误类的两种情况

$(function() {

  const $form_field = $(".cForm__formField");


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

  $form_field.blur(function() {   
     const isEmpty = !this.value.trim()
     $(this).removeClass("cForm__hasText")
            .toggleClass("cForm__error", isEmpty);
  });

});

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

【讨论】：

【解决方案3】：

我认为您需要在失去焦点后检查输入。还需要删除一个类并添加另一个类。

$(function() {
  const form_field = $(".cForm__formField");

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

  $(form_field).focusout(function() {
    if (this.value) {
      $(this).addClass("cForm__hasText").removeClass("cForm__error");
    } else {
      $(this).addClass("cForm__error").removeClass("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">

【讨论】：

【解决方案4】：

首先，我建议你使用 id ，因为它在触发与类不同的元素时更精确。如果您有多个具有相同类的输入，它们都会被触发为红色，因为用户没有填写第一个。

其次，我建议使用 .on() ，因为它会等到网页上的所有元素都呈现出来。这是一个示例，它将为您提供所需的输出

$(document).ready(function(){
    $(".cForm__formField").on("blur", function(e){
    if(e.target.value === '')
        $("#"+e.target.id).addClass("cForm__formRed");
  })
})

jsfiddle

【讨论】：