捕获Parsley JS字段错误并更新CSS

Question

I'm completely new to ParsleyJS and don't really know if what I am doing is a wrong way to approach this. But, as I get an error on a particular field that is being validated by Parsley, I want to update the CSS on the field to outline a solid red border . I have the following code, where I can extract the CSS, but cant seem to attach a JQuery call to update the CSS on the field.

$('form#logon.parsleyParse').parsley().on('field:error', function() {
    console.log('Validation failed for: ', this.$element);
    var element = '#' + this.$element[0].id;
    console.log(element);
    $(this.$element[0].id).css("border: 1px solid red !important;");
});

Basically, when I console log that element, it prints out the proper CSS element.. But, I can seem to make the call to JQuery to change the CSS..

Any ideas on what the best way to do this? Or how to do this properly?

Answer 1

Parsley will add error classes for you, so you simply need to specify some CSS rules for those classes.

Parsley has many examples, check out how it's done there.