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.
精彩评论