Knockout-Validation validationMessage postions css conflict

Question

I am trying to validate a Knockout JS dynamic questions form:

<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));

The challenge is when observableArray data.Defalut is extend(data.Validation). It adds 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>

Which conflicts with the css span and the button does not show on the rendered view. The css I am using to generates custom radio button with icon, which is at https://codepen.io/ShanKris/pen/mVOKXp.

If I remove the custom css, it works; however, the buttons do not look professional.

Is there a way to change the position of the validationMessage, preferably below the question Name.

Answer 1

I solved this by setting the valiationOptions: Insert Messages to false. and add the
validationMessage span manually after input label.

  <!--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.name}, validationOptions:{insertMessages: false},checked: $parent.Default" required="required" />
                    <span class="lbl padding-4" data-bind="text: $data.name"></span>
                </label>
                <span style="color:red" data-bind="validationMessage:  $parent.Default"></span>
            </div>
            <hr />
            <!--/ko-->