CODEWITHSUNDEEP
javascriptmootoolsvalidation
kaushik
kaushik

Reputation: 2492

Mootools - On validation fail , How to change the input boxes styles?

I have put .validation-failed in my css file. It is like this:

.validation-failed  {
border: 1px solid #C00;
background-color: #FFFFC6;
}

This code changes the background color of the text boxes, input boxes, etc but border style is untouched. I think border is not unique with all the input items, that's why they have done it. My question is

How to change the border color of input boxes as well as to put an under line to the labels associated with the input boxes?

. I have put code on 

onShowAdvice: function(element,advice,validator){....}

but nothing happened.

Upvotes: 0

Views: 581

Answers (1)

kaushik
kaushik

Reputation: 2492

I have found an answer. In the variable declaration section you have to do the following:

 // Declare validator
             var formValidator = new Form.Validator.Inline(regForm, {
                    errorPrefix: '',
                    serial: false,
                    onShowAdvice: function(element, advice) {
                        element.addClass('error');                      
                        element.getPrevious('label').addClass('error');

                    },
                    onHideAdvice: function(element, advice){
                        element.removeClass('error');
                        element.getPrevious('label').removeClass('error');                          
                    }
                 });

"onShowAdvice" You will get the element that gets validated in the variable named "element". In my case; the field before it is the label associated with the element. I am changing the class of that label to "error" and also the class of the element to "error".

"onHideAdvice" you have to remove those "error" classes.

Upvotes: 1

Related Questions