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

Question

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

score 1 · Accepted Answer · answered Jul 12 '15 at 20:13

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

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

1 Answers1