validation - decorateElement

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<form data-bind='submit:OnSubmit'>
    <label data-bind='parentvalElement:name'>
        <span>Name</span>
        <input data-bind="value: name" />
    </label>
    <input type='submit' value='submit' />
<form>

CSS

.validationElement 
{ 
    background-color:red; 
}

.parentError
{    
    border:2px solid Purple;
}

form label {
    display:block;    
}

form label span {
    display:inline-block;
    width:150px;
}

JavaScript

ko.validation.configure({ decorateElement: true });

ko.bindingHandlers.parentvalElement = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var valueIsValid = valueAccessor().isValid();
        if(!valueIsValid && viewModel.isAnyMessageShown()) {
            $(element).addClass("parentError");
        }
        else {
            $(element).removeClass("parentError");
        }
    }
};

function vm(){
    var self = this;
    self.name = ko.observable("").extend({ required:true });
    self.OnSubmit = function(){
        self.errors.showAllMessages();         
    };

    ko.validation.group(self);
}

viewModel = new vm();
ko.applyBindings(viewModel);