敲除-验证validationMessage位置css冲突

Question

我试图验证一个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 (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 span冲突，而该按钮在呈现的视图上不显示。我正在使用的css生成带有图标的自定义单选按钮，它位于https://codepen.io/ShanKris/pen/mVOKXp。

如果我删除自定义css，它可以工作；但是，按钮看起来不专业。

是否有办法改变validationMessage的位置，最好在问题名下面。

Answer 1

我通过将valiationOptions: Insert消息设置为false来解决这个问题。并添加

validationMessage在输入标签后手动跨越。

  <!--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-->