CODEWITHSUNDEEP
jquerycssformsjquery-validateinput-field
fancy_avocado
fancy_avocado

Reputation: 45

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

I have a basic registration form. For styling the input fields, my css code is below, but I'm using code from this demo from codrops: http://tympanus.net/codrops/2015/01/08/inspiration-text-input-effects/

I'm using the second example in particular (called Hoshi). Right now, when you click on the input field, a blue bottom border is animated in.

I am using Jquery validate plugin, so my js script code is the one below. I'm having trouble changing the css of errors. For example, when the user forgets to fill out a field but clicks submit, I want the input field to have a border bottom of red until its validated. But I have absolutely no idea how to achieve that. Any insight is appreciated! Thanks!

$(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);
	}
}

Upvotes: 0

Views: 70

Answers (1)

Sparky
Sparky

Reputation: 98738

Refer to the documentation. You have two options called errorClass and validClass that default to error and valid respectively. You can change these to whatever CSS class names you need...

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

The plugin applies these classes to BOTH the error message and the input element. So within your CSS, you would have to target these two kinds of things separately...

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 */
}

Since your error message labels were changed into div elements...

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 */
}

Upvotes: 1

Related Questions