在使用 jquery 验证时，我应该对这个特定的 css 进行什么更改以防止出错？

Question

我有一个基本注册表。对于输入字段的样式，我的 css 代码在下面，但我使用的是来自 codrops 的演示中的代码：http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

我特别使用第二个示例（称为 Hoshi）。现在，当您单击输入字段时，会出现一个蓝色的底部边框。

我使用的是Jquery验证插件，所以我的js脚本代码如下。我在更改 css 错误时遇到问题。例如，当用户忘记填写字段但单击提交时，我希望输入字段的边框底部为红色，直到其通过验证。但我完全不知道如何实现这一目标。任何见解表示赞赏！谢谢！

$(document).ready(function(){
 $('#tbi-form').validate({
  rules: {
   First_Name: {
    required: true,
    maxlength: 50
   },
   Last_Name: {
    required: true
   },
   Phone: {
    required: true
   },
   zip: {
    required: true,
    maxlength: 20,
    digits: true
   },
   birth_month: {
    required: true
   },
   Email: {
    required: true,
    maxlength: 100
   },
   Email_Confirm: {
    required: true,
    equalTo: "#Email"
   },
   Referral: {
    required: true,
    maxlength: 20
   }
  },
  messages: {
   First_Name: "Please enter your first name",
   Last_Name: "Please enter your last name",
   Email: "Please enter your Email",
   Email_Confirm: {
    required: "Please enter your email",
    equalTo: "Please make sure the email you entered is accurate"
   }
  },
  errorElement: 'div'
 });
});

.input__field--form {
 margin-top: 1em;
 padding: 1.5em 0em 1.2em 0.2em;
 width: 100%; 
 background: transparent;
 color: #595F6E;
 font-size: 85.25%;
}

.input__label--form {
 position: absolute;
 bottom: 0;
 left: 0;
 padding: 0 0.25em;
 width: 100%;
 height: calc(100% - 1em);
 text-align: left;
 pointer-events: none;
}

.input__label-content--form {
 position: absolute;
}

.input__label--form::before,
.input__label--form::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: calc(100% - 5px);
 border-bottom: 1px solid #B9C1CA;
}

.input__label--form::after {
 margin-top: 0px;
 border-bottom: 4px solid red;
 -webkit-transform: translate3d(-100%, 0, 0);
 transform: translate3d(-100%, 0, 0);
 -webkit-transition: -webkit-transform 0.3s;
 transition: transform 0.3s;
}

.input__label--form-color-1::after {
 border-color: #00A0E2;
}

.input__field--form:focus + .input__label--form::after,
.input--filled .input__label--form::after {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

.input__field--form:focus + .input__label--form .input__label-content--form,
.input--filled .input__label-content--form {
 -webkit-animation: anim-1 0.3s forwards;
 animation: anim-1 0.3s forwards;
}

@-webkit-keyframes anim-1 {
 50% {
  opacity: 0;
  -webkit-transform: translate3d(1em, 0, 0);
  transform: translate3d(1em, 0, 0);
 }
 51% {
  opacity: 0;
  -webkit-transform: translate3d(-1em, -40%, 0);
  transform: translate3d(-1em, -40%, 0);
 }
 100% {
  opacity: 1;
  -webkit-transform: translate3d(0, -40%, 0);
  transform: translate3d(0, -40%, 0);
 }
}

@keyframes anim-1 {
 50% {
  opacity: 0;
  -webkit-transform: translate3d(1em, 0, 0);
  transform: translate3d(1em, 0, 0);
 }
 51% {
  opacity: 0;
  -webkit-transform: translate3d(-1em, -40%, 0);
  transform: translate3d(-1em, -40%, 0);
 }
 100% {
  opacity: 1;
  -webkit-transform: translate3d(0, -40%, 0);
  transform: translate3d(0, -40%, 0);
 }
}

Answer 1

参考the documentation. You have two options called errorClass and validClass，默认分别为error和valid。您可以将这些更改为您需要的任何 CSS class 名称...

$(document).ready(function(){
    $('#tbi-form').validate({
        errorClass: "myClass",
        validClass: "myOtherClass",
        errorElement: 'div',
        rules: {
            First_Name: {
                .....

插件将这些 classes 应用于错误消息和输入元素。因此，在您的 CSS 中，您必须分别针对这两种事物...

input[type="text"].myClass {
    /* CSS properties applied to text inputs on error */
}

input[type="text"].myOtherClass {
    /* CSS properties applied to text inputs when valid */
    /* may not be needed since the validated elements usually look the same as before */
}

由于您的错误消息标签已更改为 div 个元素...

div.myClass {
    /* CSS properties applied to error label on error */
}

div.myOtherClass {
    /* CSS properties applied to error label when valid */
    /* probably not needed since you don't show an error label when valid */
}

在使用 jquery 验证时，我应该对这个特定的 css 进行什么更改以防止出错？

What change should I make to this particular css for errors while using jquery validate?

css

forms

jquery

jquery-validate

input-field