add class on input field

add class on input field ( menambahkan sebauh class pada input dengan jquery validation)

by varid007

HTML

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<form id="pc-mode">
    Email: <input type="text" name="email">
    <br>
    Password: <input type="text" name="password">
    <br>
    <input type="submit" value="submit">
</form>

CSS

.error-input{
	border-color: #b94a48;
    color: #b94a48;
}
.error-input:focus{
	border-color: #953b39;
}
.valid-input {
  border-color: #00bdf2;
  color: #00bdf2;
}
.valid-input:focus {
  border-color: #00bdf2;
}

JavaScript

$( "#pc-mode" ).validate({
  rules: {
    email: {
	   required: true,
	   email: true
	},
    password: {
	   required: true,
       rangelength: [4, 20]
	}  
  },
    
<!--     nama class bila inputan tidak sesuai -->
    errorClass: "error-input", 
<!--     nama class bila inputan sesuai -->
    validClass: "valid-input",
    
<!--     fungsi utama dalam penambahan css class --> 
    highlight: function( element, errorClass, validClass ) {
        $(element).addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function( element, errorClass, validClass ) {
        $(element).removeClass(errorClass).addClass(validClass);
    }
});