Leave input wrapped with dashes when using Jquery Validate

Question

I am using the plugin Jquey Validation and I am trying to leave the error mark in the input as in the image I am passing attached, I tried some alternatives and the result was not as expected, what I have:

$("#frmLaudo").validate({
// Regras
rules: {
    ID: {
        required:true,
    },              
    Cooperante: {
        required:true
    },
    Propriedade: {
        required:true
    },
    UF: {
        required:true
    },
    Municipio: {
        required:true
    }                               
},
// Messages for form validation
messages: {
    ID: {
        required: 'Por favor informe o ID'
    },              
    Cooperante: {
        required: 'Por favor informe o nome'
    },
    Propriedade: {
        required: 'Por favor informe a propriedade'                 
    },
    UF: {
        required: 'Por favor informe a UF'                  
    },  
    Municipio: {
        required: 'Por favor informe o Municipio'                   
    }                           
},
...

The CSS I tried would leave the background in red, but it’s not what I need, look:

label.error{
  display: none!important;
}

.error{
  background-color: red;
}

What I really need is what you see in this picture:

Version:

jQuery Validation Plugin - v1.11.0 - 2/4/2013

Answer 1

You’re right, that’s what you did:

.error{
  background-color: red;
}

will leave the background red. As you want the dashed edge should put:

.error{
  background-color: #FDFBFB;
  border: 1px dashed red;
}

That color #FDFBFB; is the color that is in your example, if you leave the background with red will not differentiate the edge and it is difficult to visualize the placeholder.

You can see other examples of edge on the W3schools.