淘汰验证消息发布css冲突

我正在尝试验证Knockout JS动态问题表单:

<form id="" action="" data-bind="foreach: Fields">
           <!--ko if: $parent.HiddenElements().indexOf(Name()) == -1 -->
        <div>
            <b type="text" data-bind="text: Name"></b>
            <br /> <br />
        </div>:
            <!--ko if: Type() == "Radio"-->
        <div data-bind="foreach: Options">
            <label>
                <input type="radio" class="mybutton" value="cherry" data-bind="value: $data.name,  attr: { 'id': $data.id},checked: $parent.Default" required="required"/>
                <span class="lbl padding-4" data-bind="text: $data.name"></span>
            </label>
        </div>
         <!--/ko-->
         <!--/ko-->
  </form>
<button type="button" data-bind='click: $root.submit'>Submit</button>

 var jsonData = [{
            Name: "Test1",
            Type: "Radio",
            Options: [{ name: 'Male' }, { name: 'Female' }, { name: 'Unknown' }],
            Validation: {required: "This question is required"},
            Default: "" 
        }];
 function FormField(data) {
        var self = this;
        self.Name = ko.observable(data.Name).extend({ required: true });
        self.Type = ko.observable(data.Type);
        self.Options = ko.observableArray(data.Type !== 'text' ? data.Options : []);
        if (Array.isArray(data.Default))
            self.Default = ko.observableArray(data.Default);
        else
            self.Default = ko.observable(data.Default).extend(data.Validation);
        if (self.Type() === 'Radio') {

            self.Default.subscribe(function (newValue) {
                alert(newValue);
            });
        }
    }
   ko.validation.init({
            insertMessages: true,
            decorateElement: true,
            errorElementClass: 'error',
            errorMessageClass: 'help-inline'
    }, true);
    function ViewModel(data) {
        var self = this;
        self.Fields = ko.observableArray(ko.utils.arrayMap(data,
            function (item) {
                return new FormField(item);
            }));
        self.HiddenElements = ko.observableArray([]);
        self.errors = ko.validation.group(this, {
                deep: true,
                observable: false
         });
        self.submit = function () {
            for (var ii = 0; ii < self.Fields().length; ii++) {
                console.log(ii);
                console.log(self.Fields()[ii].Default());
            }
            if (self.errors().length > 0) {
                self.errors.showAllMessages();
                return;
            }
            else {
                alert('Thank you.');
            }
        };
    }
    ko.applyBindings(new ViewModel(jsonData));

挑战在于当observableArray data.Defalut是extend(data.Validation)时。它增加了跨度:

<label class="checkbox-inline check">
                <input type="checkbox" class="mybutton" data-bind="checkedValue: $data.name , checked: $parent.Default" value="Green">
               **<span class="validationMessage" style="display: none;"></span>**        
               <span class="lbl padding-4" data-bind="text: $data.name">Green</span>
</label>

这与css跨度冲突,并且按钮不显示在渲染视图中。我用来生成带有图标的自定义单选按钮的css,位于 https://codepen.io/ShanKris/pen/mVOKXp 。

如果我删除自定义css,它就可以工作;然而,这些按钮看起来并不专业。

有没有办法改变validationMessage的位置,最好是在问题名称下面。