我正在尝试验证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）时，它会添加span：

<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 span冲突，并且按钮不会显示在呈现视图上。我正在使用的css生成带有图标的自定义单选按钮，位于https://codepen.io/ShanKris/pen/mVOKXp。
如果我删除自定义CSS，它就能工作;然而，按钮看起来并不专业。
有没有办法改变validationMessage的位置，最好是在问题Name下面。