Leave input wrapped with strokes when using Jquery Validate

Navigation
1

I'm using the Jquey Validation plugin and I'm trying to leave the error mark in the input as in the image I'm attaching, tried some alternatives and the result was not what I 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, see: 

label.error{
  display: none!important;
}

.error{
  background-color: red;
}

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

Version:

  

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

    
asked by anonymous 01.12.2016 / 17:50

1 answer

2

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

.error{
  background-color: red;
}

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

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

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

You can see other border examples on the W3schools site.

    
01.12.2016 / 20:58
Join for 2 tables Get elements of a dependent column from another [duplicate]