敲除验证验证邮政CSS冲突

Question

我正在尝试验证淘汰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跨度发生冲突，并且在渲染视图上没有显示按钮。我用来用图标生成自定义的广播按钮的CSS，该按钮 https：//codepen.io/ shankris/pen/mvokxp 。

如果我删除自定义CSS，则可以使用；但是，这些按钮看起来不专业。

是否有一种方法可以更改验证信息的位置，最好低于问题名称。

Answer 1

我通过设置“疏远”：将消息插入false解决了这一问题。并添加
输入标签后手动手动验证范围。

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