在使用 jquery validate 时，我应该对这个特定的 css 进行哪些更改以防出错？

Question

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

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

我使用的是 Jquery validate 插件，所以我的 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。您有两个名为 errorClass and validClass 的选项，它们分别默认为 error 和 valid。您可以将这些更改为您需要的任何 CSS 类名称...

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

插件将这些类应用于错误消息和输入元素。因此，在您的 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 */
}