开发者

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 c开发者_开发技巧hange 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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜