带有输入颜色的 jQuery 表单验证答案

【问题标题】：jQuery form validation with input color带有输入颜色的 jQuery 表单验证
【发布时间】：2017-04-09 22:17:22
【问题描述】：

我想用 jQuery 验证空输入字段，就像在这个网站上一样 vk.com

我喜欢你在这个网站上提交表单时的效果，输入会变成红色，然后逐渐变成初始颜色。你可以自己看这个

Here is video of this validation

【问题讨论】：

没问题，自己试试贴代码，说不定能帮到你……

标签： jquery forms validation input

【解决方案1】：

您可以使用 Jquery 并在提交时添加 error 并在 1 秒后删除该类。

对于过渡效果，您可以使用 css3 背景色过渡到 error 类。

例如，参考下面的代码。

$(document).ready(function() {
  $("#login_button").click(function() {
    var phoneEmail = $("#phone_email");
    if(!phoneEmail.val()) {
      phoneEmail.addClass('error');
      setTimeout(function(){
        phoneEmail.removeClass('error');
      }, 1000);
    }
  });
});

input {
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

input.error {
  background: #f3765b;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="phone_email" placeholder="Phone or email">
  <input type="password" id="pass" placeholder="password">  
  <button id="login_button">Log in</button>  
</form>

【讨论】：

它看起来不错，不过我会尝试添加一些渐变的颜色
transition: 'background-color 1s ease-in-out', "background-color": "red"
@kilogram 是的，你可以根据（y）修改。
@kilogram 我也做了一些更改，看看更新的答案是否对您有更多帮助。
这正是我想要的。它看起来棒极了。谢谢你，我的朋友。

【解决方案2】：

试试这样的：

//check if input is empty    
$('.someinputs').each(function(){
          if($(this).val() == 0 || $(this).val() == '') {
            $(this).addClass('empty_field');
          }
          else {
            $(this).removeClass('empty_field');
          }
        });

//this function lights field which have class '.empty_field'
function lightEmpty(){
                $('.empty_field').each(function(){                      
                   $(this).css('border','2px solid #d8512d');
                });
                setTimeout(function(){
                $('.empty_field').each(function(){                        
                  $(this).css('border','1px solid #cdcdcd');
                });
              },1500);
}

//this triggers lightEmpty()
if (emptyInputs.length != 0)
    {
        lightEmpty();
    }

它只是用特定颜色更改输入的边界，您可以在 setTimeout 函数中编写时间。我想你可以弄清楚在哪里使用这段代码

【讨论】：

非常感谢，但我不想要边框。前面的例子很好
和我在 vk.com 上看到的很接近